여기에 자식 구성 요소의 함수 change ()를 호출하여 부모 구성 요소의 자식 구성 요소보기에서 사용한 str 값을 업데이트하고 싶습니다.
import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
selector: 'app-root',
template: `
<h1>parent</h1>
<button (click)="changeChild()">change child</button>
<app-child></app-child>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private cc:ChildComponent) {}
changeChild(){
this.cc.change();
}
}
하위 구성 요소는 다음과 같습니다.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<p>{{str}}</p>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
private str;
constructor() {
this.str = 'initial'
}
change(){
this.str = 'changed'
}
ngOnInit() {
}
}
그러나 뷰의 str 값은 "변경됨"으로 업데이트되지 않았습니다.
나는 Angular 4에서 처음이기 때문에 도움이 필요하십니까?
@ViewChild를 사용하여 자식 구성 요소의 참조 얻기
in Parent component
import {ChildComponent} from 'child.component.ts'
export class ParentComponent{
------
@ViewChild(ChildComponent)
private child:ChildComponent
---
changeChild(){
this.child.change()
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다