Angular2 usando @ Entradas con s

Question

Angular2 usando @ Entradas con s

Tengo una sub-navegación en mi página que muestra algunas subviews debajo de una vista principal común. Me gustaría pasar un objeto a las subviews a través del <router-outlet> para que pueda recuperar los datos una vez en el componente principal y simplemente compartirlo con mis subcomponentes.

Nota: Si incluyo la directiva <one></one> en el main.html funciona, pero este no es mi comportamiento deseado.

Vista Principal:

<h1>Details</h1>   
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a>   
<hr/>  
<router-outlet [data]="maindata"></router-outlet>

Sub Ver 1:

<h2>{{ data.name }}</h2>
...

Principal Vista:

@Component({
    selector: 'main-detail',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: './main.html'
})
@RouteConfig([
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
    maindata: Object = {name:'jim'};
}

Sub Ver 1:

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    inputs: ['data'],
    templateUrl: './one.html'
})
export class OneComponent {
    @Input() data;
}

28

typescript angular angular2-template

Author: Jason Swett, 2015-12-18

Source

3 answers

Parece que la sintaxis ha sido cambiada. A continuación funciona para mí ~Angular4.0.0

HTML (Pasar Parámetros de Ruta)

<li><a [routerLink]="['/templatecreate',{mode:'New'}]">New Job</a></li>

Componente

constructor(private route: ActivatedRoute) { }

ngOnInit() {       
  this.getTemplate();

  this.sub = this.route.params.subscribe(params => { this.id = params['mode'];
  console.log("Routing Mode", this.id);    
  });
}

9

Author: Tanmay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-24 19:03:10

Creo que la forma correcta Angular2 de pasar datos es a través de Inyecciones de Dependencia (mediante el uso de un Servicio) de lo contrario, el usuario podrá ver los datos que está pasando en la URL del navegador.

Además, el uso de un Servicio permitirá la "Separación de Preocupaciones", lo que significa que el Componente A no debería depender del Componente B.

Enlaces de Inyección de Dependencias:

1) https://angular.io/guide/dependency-injection

2) https://angular.io/guide/dependency-injection-in-action

3) https://www.youtube.com/watch?v=MJrw43GP2u0

0

Author: Gene,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-01 22:15:31

score 8 · Accepted Answer

Si se trata de datos simples, puede pasarlos a través de routeParams

<a [router-link]="['./sub3'],{name:'jim'}">Three</a>

Luego en su vista secundaria

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    templateUrl: './one.html'
})
export class OneComponent {
    data: any;
  constructor(params: RouteParams){
    this.data = params.get('data');
  }
}

También puede configurar la ruta para que siempre pase parámetros desde el componente moviendo el RouterConfig DENTRO del componente (Tenga en cuenta que esto no es lo que normalmente se hace):

export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList,
              private router_: Router) {
    list.get('histoy', (response) => {
      this.history = response;
    });
    router_.config([
      { path: '/', component: HomeCmp, as: 'Home', data: this.history },
      { path: '/about', component: AboutCmp, as: 'About' }
    ]);
  }
}

Crédito a la Fuente

Si va a hacer algo más complejo, le sugiero que use un servicio para comunicarse entre rutas/componentes. En realidad es de la manera que prefiero hacerlo.

Ejemplo de servicio:

import {Injectable} from 'angular2/angular2';

@Injectable()
export class CarsService {
  list1: array<any> = ['a','b','c','d'];
  list2: array<any>;

  constructor() {
    this.list2 = [1,2,3,9,11];
  }
}

Cómo Inyectar un servicio:

export class Cars {
  constructor(cars:CarsService) {
    this.cmpList1 = cars.list1;
    this.cmpList2 = cars.list2;
  }
}

De esta manera puede usar el servicio para comunicarse independientemente de las restricciones de padres/hijos u otras restricciones extrañas.