web-dev-qa-db-fra.com

Angular2 utilisant @Inputs avec <router-sortie> s

J'ai une sous-navigation dans ma page qui affiche certaines sous-vues sous une vue principale commune. Je voudrais passer un objet aux sous-vues à travers le <router-outlet> pour pouvoir récupérer les données une fois dans le composant principal et les partager avec mes sous-composants.

Remarque: Si j'inclus la directive <one></one> dans le fichier main.html , mais cela ne correspond pas à mon comportement souhaité.

Vue principale:

<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>

vue secondaire 1:

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

Vue principale:

@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'};
}

vue secondaire 1:

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

Si ce sont des données simples, vous pouvez les transmettre RouteParams

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

puis dans votre vue secondaire

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

Vous pouvez également configurer la route pour qu'elle passe toujours les paramètres du composant en déplaçant RouterConfig À L'INTÉRIEUR du composant (notez que ce n'est pas comme cela est normalement fait) :

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édit à la source

Si vous voulez faire quelque chose de plus complexe, je vous suggère d'utiliser un service pour communiquer entre les itinéraires/composants. C'est en fait la façon dont je préfère le faire.

Exemple de service:

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];
  }
}

Comment vous injectez un service:

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

De cette façon, vous pouvez utiliser le service pour communiquer indépendamment des restrictions parent/enfant ou autres restrictions étranges.

14
Dennis Smolek

On dirait que la syntaxe a été changée. Ci-dessous fonctionne pour moi ~ Angular4.0.0

HTML (Pass Route Parameters)

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

composant

constructor(private route: ActivatedRoute) { }

ngOnInit() {       
  this.getTemplate();

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

Je pense que la manière appropriée pour Angular2 de transmettre des données consiste à utiliser des injections de dépendance (en utilisant un service), sinon l'utilisateur sera en mesure de voir les données que vous transmettez dans l'URL du navigateur.

En outre, l'utilisation d'un service permettra une "séparation des problèmes", ce qui signifie que le composant A ne devrait pas dépendre du composant B.

Liens d'injection de dépendance:

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

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

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

0
Gene