在 Angular 12 中嵌套组件 - “范围”的问题

Posted 2023-02-23

【中文标题】在 Angular 12 中嵌套组件 - “范围”的问题

【英文标题】：Nesting components in Angular 12 - issue with 'Scope'

【发布时间】：2022-01-16 18:20:25

【问题描述】：

在使用 AngularJS 多年后，我只是想了解一下 Angular12，并且我希望解决的问题很简单：我知道 Scope 不再存在，但似乎该组件正在从不同的范围呈现数据。

我有一个组件可以从服务中获取一些结果并将它们显示在页面上。

<app-search-component> 这有一个名为 doSearch(xxxx) 的方法，它填充 this.items 然后呈现结果。

如果我直接路由到那个组件，一切都会完美运行。

我想要激活的是以与 Angular JS 中的指令类似的方式使用该组件

我尝试通过构造函数传递组件并尝试在我的组件中创建一个新组件，但我无法让子组件刷新其视图。

似乎在调试子组件时，我的模板上的版本具有不同的“范围”。

模板示例我的父组件

  <form [formGroup] ="searchForm" class="searchForm" (ngSubmit)="onSubmit()">
      <mat-form-field class="search-full-width" appearance="fill">
        <mat-label>User Name</mat-label>
        <input matInput value="" formControlName="name">
      </mat-form-field>
    
      <mat-form-field class="search-full-width" appearance="fill">
        <mat-label>Email</mat-label>
        <input matInput formControlName="email">
       
      </mat-form-field> 
      <mat-form-field class="search-full-width" appearance="fill">
        <mat-label>Postcode</mat-label>
        <input matInput formControlName="postcode">
       
      </mat-form-field>
    
      <button mat-raised-button color="primary" type = "submit">Search</button>
</form> 
<app-search-component>

我的父组件包含对搜索方法的调用如下：

构造函数：

this.searchComp= new MySearchComponent(_myService, _zone);

提交时

 this.searchComp.doSearch(this.searchText);

【问题讨论】：

我猜你在视图和构造函数中创建了一个组件。您不应该在构造函数中创建实例。如果您需要访问组件上定义的公共方法，请在您的情况下使用 ViewChield 装饰器。或者，这是更好的方法，在搜索组件上使用输入并将“searchText”以正常方式传递给组件。有关视图的信息：angular.io/api/core/ViewChild 和有关输入的信息：angular.io/api/core/Input 在 ngOnChanges 方法中您可以将您的方法称为“doSearch”

谢谢@Thomas - 简直就是要更新我自己的问题。发现 Angular 12 既痛苦又快乐！

【参考方案1】：

这里有 2 个选项。您可以通过服务完成搜索，也可以为此使用 viewchild。为了让代码看起来更像你已经拥有的，你可以在你的父组件中做这样的事情

@ViewChild(MySearchComponent)
searchComp : MySearchComponent

模板将为您创建组件，因此请从您的构造函数中删除新的 MySearchComponent

【讨论】：

谢谢@henrik - 我正要更新这个 - 我发现 viewchild :-) - 一旦你知道要寻找什么似乎很容易。