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

如果我在您点击链接时了解您的代码，请转到/个人资料页面。因此，如果内容B是配置文件组件，您可以发送您的user.id抛出路由器参数，如：

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

当然要配置正确的路线。您可以查看这些文档：

在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)
  }
}

注意，不要试图将输入变量显示到不起作用的构造函数

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

1 个答案: