Question

我编写了显示标签的组件：<tab>{{content}}</tab

此组件包含在模板中的主AppComponent中。

我在AppComponent中声明了一个对象。如何将它发送到组件Tab，该对象将在Tab组件中可用？

我尝试在@Input中使用AppComponent，但却以这种方式感到困惑。

@Input() object: TabContent;

Answer 1

除了输入之外，您还可以使用模板变量与子组件进行交互

模板参考变量

模板引用变量允许您在组件上指定变量名称，并且可以使用该变量访问该组件上的任何公共属性。

例如 ProductCardComponent ，它是放置在 ProductListComponent （ParentComponent）中的子组件，用于列出一些产品，如下所示。

<强> ProductListComponent.html

<div>
    <h1>Product Gallery</h1>
    <hr/>
     <product-card #productReference></product-card>

</div>

您可以看到我在此子组件上添加了名为 #productReference 的模板引用变量。

让我们在 ProductCardComponent 中添加属性和方法，并使用模板引用变量从父组件访问该属性和方法。

import { Component, Input, Output, EventEmitter } from '@angular/core'
@Component({
    selector: 'product-card',
    templateUrl: "app/products/ProductCard.Component.html",
    styles:[`.pad-left{margin-left:10px}
             .well-div{color:blue}`]
})

export class ProductCardComponent {

    someProperty:string="Property from Child Component";

    logSomething(){
        console.log("Method from Child Component");
    }

}

从 ProductListComponent.html

访问属性和方法

<div>
    <h1>Product Gallery</h1>
    <hr/>
     <product-card #productReference></product-card>

   <button class="btn btn-primary" (click)="productReference.logSomething()" >Log Something from Child</button>

   <h3>{{productReference.someProperty}}</h3>

</div>

Angular中与组件交互的其他方式

@Input（与子组件通信）
@Output（与父组件通信）
模板参考（使用模板引用变量与子组件交互的另一种方法）
AngularService

官方文档：https://angular.io/guide/component-interaction

Answer 2

使用@Input()似乎就是您想要做的。

在tab组件中，您应该拥有 @Input() object : TabContent

然后，在AppComponent中，您将拥有一些变量 var myObject : TabContent

@Input()装饰器将该字段标记为绑定的目标。

然后，您应该将AppComponent中的对象绑定到选项卡组件中的@Input()，如此（在模板中）： <tab [object]="myObject"></tab

在此处阅读有关组件互动的内容：https://angular.io/guide/component-interaction。文档非常有用。

如何从组件发送数据到组件？

2 个答案:

模板参考变量

Angular中与组件交互的其他方式