Angular：如何访问父组件中的子组件模板变量？答案

【问题标题】：Angular: How can I access Child Component template variable in parent Component?Angular：如何访问父组件中的子组件模板变量？
【发布时间】：2018-04-19 15:07:07
【问题描述】：

我正在尝试访问父级app.component.ts 中的#temp 或modalconfirm.component.html，但它始终为空。

modalconfirm.component.html

<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>

app.component.ts

import { Component, TemplateRef, ViewChild, ElementRef } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';

import { BsModalService } from 'ngx-bootstrap/modal';
import { ModalcomfirmComponent } from './modalcomfirm/modalcomfirm.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',

   template:`
  <modalcomfirm ></modalcomfirm>

  <table>
  <tr><td><div (click)="TestChild()">1</div></td></tr>
  <tr><td><div>2</div></td></tr>
  ` 
 // styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  @ViewChild("template") inputChild: ElementRef;

  @ViewChild(ModalcomfirmComponent ) child: ModalcomfirmComponent; 
TestChild(){
  console.log(this.inputChild); //undefined

}
ngOnInit(){

}
  confirmParent(evt) {
    console.log(evt);
 }

}

【问题讨论】：

标签： angular angular5 angular2-template

【解决方案1】：

您不能直接访问子组件的模板变量。

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

但是，如果您试图从模态子组件中获取结果（确认/拒绝）值，您可以通过@Output 装饰器和EventEmitters 来完成。

见Angular - Component Interaction和Angular - Template Syntax > Input and Output properties

另外，请查看here 以了解智能（容器）和哑（演示）组件。

【讨论】：

【解决方案2】：

您好，尝试使用属性上的 @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

【讨论】：