[英]Angular: How can I access Child Component template variable in parent Component?
I am trying to access #temp
of modalconfirm.component.html
in parent app.component.ts
but its always null. 我正在尝试在父
app.component.ts
访问modalconfirm.component.html
#temp
,但始终为null。
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 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);
}
}
You can't access template variable of child components directly. 您不能直接访问子组件的模板变量。
Template variables can only be referenced in the same tamplate you define them . 模板变量只能在定义模板的模板中引用 。
But if you are trying to get the result (confirm/decline) value from the modal child component, you can do it through @Output
decorator and EventEmitter
s. 但是,如果您试图从模态子组件中获取结果(确认/拒绝)值,则可以通过
@Output
decorator和EventEmitter
。
See Angular - Component Interaction and Angular - Template Syntax > Input and Output properties 请参见Angular-组件交互和Angular-模板语法>输入和输出属性
Also, take a look here to read about smart (containers) and dumb (presentational) components. 另外,请在此处阅读有关智能 (容器)和哑 (代表性)组件的信息。
Hello try by using you the @Input and @Output decorators on properties to communicate between the two components. 您好,尝试使用属性上的@Input和@Output装饰器在两个组件之间进行通信。
The Output decorator works like callback to return a value from child component, and the Input is used to send a parameter to a child component. Output装饰器的工作原理类似于回调,以从子组件返回值,而Input用于将参数发送到子组件。
Example: 例:
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 is going to be a parameter or value that you want to send to child component, and functionInParent is going to be a function in your parent component, it resieve as a callback the child response. valueInParent将成为您要发送给子组件的参数或值,而functionInParent将成为您父组件中的函数,它将作为子响应的回调而接收。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.