为什么数据绑定在 Angular 13 中不起作用？

Question

我在我的头部组件中创建了一个事件并试图在应用程序组件中收听它，但它没有按预期工作。

在 header.component.html 中，点击“Recipes”它发送 'recipe' 字符串到“onSelect()”方法并点击“Shopping” List”，它正在将字符串 'shopping-list' 发送到“onSelect()”方法。

          <li><a href="#" (click)="onSelect('recipe')"> Recipes</a></li>
          <li><a href="#" (click)="onSelect('shopping-list')"> Shopping List</a></li>

在 header.component.ts 中，我创建了发送数据的事件“featureSelected”，无论我们在“onSelect()”方法中收到什么。

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

   onSelect(feature:string){
   this.featureSelected.emit(feature);
  }

现在，我们在 app.component.html 中列出事件“featureSelected”，如果它发出字符串“recipe”，我们加载，否则我们加载“shopping-list”组件。

<app-header> (featureSelected)="onNavigate($event)"</app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
     
    <app-recipes *ngIf="loadedFeature === 'recipe'"></app-recipes>
      <app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
      </div>
  </div>
</div>

app.component.ts

 loadedFeature='recipe';

 onNavigate(feature:string){
   this.loadedFeature=feature;
}

点击“购物清单”时未加载购物清单组件。我认为即使代码看起来不错，听众也无法正常工作。请帮助我找到问题，如果需要任何其他信息，请告诉我。

Answer 1

<app-header> (featureSelected)="onNavigate($event)"</app-header>

首先这是不正确的。你需要像这样在 app-header 中使用输出方法。

<app-header (featureSelected)="onNavigate($event)"> </app-header>

然后您可以在 onNavigate($event) 中访问并将其存储到一些属性。

有工作示例的 stackblitz StackBlitzDemo

如果这有助于将其标记为答案，请。

为什么数据绑定在 Angular 13 中不起作用？

Why databinding is not working in Angular 13?

html

data-binding

typescript

angular

angular13