在 Angular 中如何定义 "router" 成员字段？

Question

对于Angular9，我有一个父组件，我想在其中将一个函数传递给子组件。我想将“onNavigate”函数传递给子组件...

import { Router, ActivatedRoute } from '@angular/router';
...
export class StatsComponent implements OnInit {
    
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private apiService: ApiService
  ) { }

    ...

  onNavigate(event): void {
    const id = event.target.value;
    if(parseInt(id) !== this.itemId) {
      const url = `/stats/${this.itemId}`;
      this.router.navigateByUrl(url);
    }
  }

父组件看起来像这样...

<form id="statForm" method="get">
    <app-item-menu [default_selected]="itemId"
                        [value_change_callback]="onNavigate"></app-item-menu>
</form>

子组件看起来很简单...

<select id="item" (change)="valueChangeCallback($event)">
    <option *ngFor="let item of items"
        [selected]="item.id === default_selected">{{item.path}}</option>
</select>

但是当我更改菜单中的项目时，我得到一个

ERROR TypeError: this.router is undefined

在“onNavigate”方法中。我还需要如何定义我的路由器？

Answer 1

您需要使用 @Output() 装饰器在子组件上标记一个属性，这允许您将数据从子组件发送到父组件或以任何方式对该事件做出反应。添加属性到你的 app-item-menu 组件

@Output() idChanged = new EventEmitter<string>();

然后子组件 (app-item-menu) 需要发出此事件，例如，您可以在更改方法中执行此操作。

public changeId($event: any): void {
  this.idChanged.next($event.id); // no idea where the id is, but I hope you get it.
}
HTML:
<select id="item" (change)="changeId($event)">
    <option *ngFor="let item of items"
        [selected]="item.id === default_selected">{{item.path}}</option>
</select>

在父组件中，您可以将方法绑定到上述事件。

<form id="statForm" method="get">
    <app-item-menu [default_selected]="itemId"
                        (idChanged)="onNavigate($event)"></app-item-menu>
</form>

如果您需要更多信息，read the docs

Answer 2

您真的应该阅读 angular.io 上的 angular 指南，但只是为了让您尽可能接近实施。

父组件：

<form id="statForm" method="get">
    <app-item-menu [default_selected]="itemId"
                        (valueChangeCallback)="onNavigate($event)"></app-item-menu>
</form>

子组件：

<select id="item" (change)="valueChangeCallback.emit($event)">
    <option *ngFor="let item of items"
        [selected]="item.id === default_selected">{{item.path}}</option>
</select>

并使您的 valueChangeCallback 成为输出属性，而不是输入：

//...
Output()
valueChangeCallback: EventEmitter<any> = new EventEmitter();

在 Angular 中如何定义 "router" 成员字段？

In Angular how do I define a "router" member field?

angular

callback

routes

router

angular9