在 Angular @Input() 不适用于最简单的硬编码字符串输入

Question

我有 admin.users.list.html 作为父模板，它向子组件输入一些数据：

<general-entities-list-container *ngIf="{
    entityType: entityType$ | async
} as asyncData"
  [entityType]='asyncData.entityType'
  [entityTypeHardCoded]="'users'"
  [entityTypeSet]="'users'"
  >
</general-entities-list-container>

我有 general-entity-list-container.html（子模板）：

entityType is:{{ entityType }} <br/>
entityTypeSet is:{{ entityTypeSet }} <br/>
entityTypeSet_ is:{{ entityTypeSet_ }} <br/>
entityTypeHardCoded is:{{ entityTypeHardCoded }} <br/>

admin.users.list.ts:

entityType$: Observable<string> = of('users');

general-entity-list-container.ts 有：

@Input() entityType: string;
@Input() entityTypeHardCoded: string;

entityTypeSet_: string;
    
@Input() set entityTypeSet(cet: string) {
  this.entityTypeSet_ = cet;
  //this.handleChangeCurrentEntityType(cet);
}
get entityTypeSet(){
  return this.entityTypeSet_;
}

我无法在子组件模板中的任何位置绝对输出。这里有什么问题。我在父组件和子组件上都使用 changeDetection: ChangeDetectionStrategy.OnPush,。

Answer 1

首先，您的 *ngIf 将始终 return 为真（它会检查是否定义了 asyncData 对象，但实际上是您在定义它，所以这将是真的）。如果您尝试将异步管道订阅组合在一起，那么最好在顶部包装器元素中使用 *ngIf，然后在您的子元素中使用

*ngIf="asyncData.entityType"

类似于：

<div *ngIf="{
  entityType: entityType$ | async
} as asyncData"
    <child-component 
        *ngIf="asyncData.entityType" 
        [entityType]="asyncData.entityType">
    </child-component>
</div>

然后我看到单引号，应该是双引号：

[entityType]='asyncData.entityType'

应该是：

[entityType]="asyncData.entityType"

除此之外，它适用于 stackblitz。所以肯定还有其他问题。将组件导入模块、将模块导入模块、在组件中引用错误的模板等。但似乎 Angular 输入仍然有效 :)

我建议您先尝试使用 stackblitz，然后检查 components/modules 设置中还有什么问题。问题就在那里，不在输入中。

https://stackblitz.com/edit/angular-ivy-zgqtey?file=src%2Fapp%2Fapp.component.html[][1]

在 Angular @Input() 不适用于最简单的硬编码字符串输入

In Angular @Input() doesn't work for the simplest hardcoded string input

angular

input

rxjs

push

parent-child