Angular:如何访问父Component中的Child Component模板变量?

时间:2018-04-19 15:07:08

标签: angular angular5 angular2-template

我正在尝试访问父#tempmodalconfirm.component.html的{​​{1}},但它始终为空。

modalconfirm.component.html

app.component.ts

app.component.ts

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
<br><br>
<pre class="card card-block card-header">{{message}}</pre>
<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to confirm?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

2 个答案:

答案 0 :(得分:1)

您无法直接访问子组件的模板变量。

模板变量只能在您定义的同一个模板中引用

但是,如果您尝试从模态子组件中获取结果(确认/拒绝)值,则可以通过@Output装饰器和EventEmitter来完成。

请参阅Angular - Component InteractionAngular - Template Syntax > Input and Output properties

另外,请查看here以了解智能(容器)和 dumb (表示性)组件。

答案 1 :(得分:0)

Hello尝试使用属性上的@Input和@Output装饰器来在两个组件之间进行通信。

Output装饰器的工作方式类似于回调以从子组件返回值,而Input用于将参数发送到子组件。

示例:

    import { Component, Input, EventEmitter, Output } from '@angular/core';

    @Component({
        selector: 'child-element',
        templateUrl: './child.component.html',
        styleUrls: ['./child.component.css']
    })
    export class ChildComponent implements OnChanges {
        @Input() value: number;
        counter: number;
        @Output() valueOutput: EventEmitter<string> =
                new EventEmitter<string>();

        ngOnChanges(): void {
            this.counter++;
            this.value= this.counter;

            this.valueOutput.emit(`The value${this.value} isChanged!`); 

        }

    }

//this.valueOutput.emit must be used when you want to return a value to the parent component

//implementation in parent  html templeate
<child-element [value]='valueInParent' (valueOutput)='functionInParent()' ></child-element>

valueInParent 将成为您要发送给子组件的参数或值, functionInParent 将成为父组件中的一个函数,它将作为子回复的回调来缓解。

Answer Reference