将变量发送到 Angular 中的另一个组件

Question

我想将一个变量发送到另一个组件。

组件A中的HTML-doc，我想将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>

我想将 id 发送到组件 B 的组件 A（这是我卡住的地方）

 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'])
    }
}

或

如果您单击链接时只想向页面中的组件发送值，则可以使用 @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)
  }
}

小心，不要尝试将输入变量显示到不起作用的构造函数中