將Variabel發送到Angular中的另一個組件

Question

我想將變量發送給其他組件。

HTML，DOC在A組份，我想送user.id組分B

<li class="list-group-item list-group-item-action" *ngFor="let user of users"> 
<a routerLink="/profile" routerLinkActive="active" (click)="testFunc(user.id)"> 
    {{user.name}} 
</a> 
</li> 

A組份，我想送id來組分B（這是我卡）

testFunc (id: JSON): string { 
    //Send to component B 
    } 

我不知道這是否足夠的信息，但我可以提供更多，如果需要。

Answer 1

如果我理解你的代碼，當你點擊鏈接時，你將進入/ profile頁面。 因此，如果內容B是成型件，你可以把你扔user.id路由器的參數，如：

<a [routerLink]="['/profile', user.id]"> 

當然之前配置正確的路線。您可以檢查這些單證：

• https://angular.io/guide/router#optional-route-parameters
• https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

在app.module.ts

const appRoutes: Routes = [ 
    {path: 'addProfile', component: AddProfileComponent }, 
    {path: 'listProfiles', component: ListProfilesComponent}, 
    {path: 'profile/:id', component: ProfileComponent} 
] 

而且

在ProfileComponent

export class ProfileComponent implements OnInit { 
    private selectedId: number; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
     this.route.paramMap 
       .switchMap(params => this.selectedId = +params.get('id'); 
     // second option 
     this.route.params.subscribe(params => this.selectedId = +params['id']) 
    } 
} 

OR

如果當你點擊你只想一個值發送到這是在你的頁面組件的鏈接，你可以使用@input裝飾。就像這樣：

<componentA> 
    <li class="list-group-item list-group-item-action" 
     *ngFor="let user of users"> 

     <a routerLink="/profile" routerLinkActive="active" 
      (click)="testFunc(user.id)">{{user.name}}</a> 
    </li> 

    <componentB [inputName]="userId"></componentB> 
</componentA> 

在TS文件：

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'componentA', 
    templateUrl: 'url' 
}) 
export class ComponentA { 
    public userId: string = "" 
    constructor() {} 

    public function testFunc(id: string): void { 
    this.userId = id 
    } 
} 

....

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'componentB', 
    templateUrl: 'url' 
}) 
export class ComponentB implements OnInit { 
    @Input() inputName: string; 
    constructor() {} 

    function ngOnInit(): void { 
    console.log(inputName) 
    } 
} 

要小心，不要試圖你的輸入變量顯示爲構造函數沒有按」 t工作