角父组件“作用域”子组件

时间:2019-03-14 15:47:31

标签: javascript angular

假设我有组件ParentChildChild既可以用作独立组件,也可以在Parent组件中使用。但是,我希望Child会根据其住处而有不同的行为。

假设Child有一个可选的@Input [isHappy],它可以是truefalse但是,每当Child组件托管Parent组件时,假定isHappy必须始终为真。

AFAICT有两种方法可以做到这一点:

1)每当[isHappy]="true"托管Child时,用户必须常识始终指定Parent

<parent>
  <child [isHappy]="true"></child>
</parent>

2)Parent在其this.child.isHappy = true生命周期挂钩中手动设置ngOnInit

首选哪种方法?在我看来,方法2更有意义,当托管[isHappy]="true"时,用户不必知道设置Child Parent。另一方面,我知道在Angular中,组件之间以编程方式进行更改的想法不那么普遍,尤其是在所有组件都是OnPush的情况下(如果我错了,请纠正我)。

2 个答案:

答案 0 :(得分:0)

  

我希望孩子根据自己的住所而有不同的行为。

如何让PYTHONPATH组件与Child一起生活在何处:

ElementRef

stackblitz:https://stackblitz.com/edit/angular-kagdsu

答案 1 :(得分:0)

我认为第二种方法可行,但这可能会在您的解决方案中添加一些内容

  1. 两个组件之间的紧密耦合
  2. 如果[FunctionName("CosmosTrigger")] public static void Run([CosmosDBTrigger( databaseName: "ToDoItems", collectionName: "Items", ConnectionStringSetting = "CosmosDBConnection", LeaseCollectionName = "leases", CreateLeaseCollectionIfNotExists = true)]IReadOnlyList<Document> documents, [CosmosDB( databaseName: "ToDoItems", collectionName: "CollectionToQuery", ConnectionStringSetting = "CosmosDBConnection")] DocumentClient client, ILogger log) { foreach (var documentInsertedOrUpdated in documents) { try { // Do a read document on another collection var otherDocument = await client.ReadDocumentAsync(UriFactory.CreateDocumentUri("ToDoItems", "CollectionToQuery", "some-id-maybe-taking-it-from-the-documentInsertedOrUpdated")); } catch(Exception ex) { log.LogError(ex, "Failed to process document"); } } } 组件没有parent组件怎么办?

为更好地解决此问题,建议您使用child装饰器,该装饰器将要求Host组件具有Parent组件依赖关系。如果存在,则将Child属性设为isHappy

true

我什至理解以上建议的方法在@Component({...}) export class Child { @Input() isHappy: boolean = false; constructor(@Optional() @Host() private parent: Parent) {} ngOnInit() { // Do only if parent exists if (this.parent) { this.parent.isHappy = true } } } 组件之间具有紧密的耦合。我们应该考虑从内部子组件中删除该依赖项。

是的,我们可以通过一些小技巧来做到这一点,在这里我们将检查当前组件的直接父组件名称,如下所示。为了达到相同的目的,您必须添加Parent依赖项才能拥有父/宿主组件。

ViewContainerRef