無法獲取子DOM元素的保持

Question

Note: since the problem is a little complex, the code is abstracted for readability

我們一個<parent-component>這樣的：

<child-component></child-component> 
<button (click)="doSomeClick()"> Do Some Click </button> 

的的<child-component>的template是：

<textarea #childComponentElement #someField="ngModel" name="someName" [(ngModel)]="someModel"></textarea> 

我們試圖訪問這個元素在parent-component.component.ts裏面的值如下：

export class ParentComponent implements AfterViewInit { 
    @ViewChild('childComponentElement') el:ElementRef; 

    ngAfterViewInit() { 
     console.log(this.el.nativeElement.value); 
    } 
    doSomeClick(){ 

    } 
} 

但是它拋出這個錯誤：

​​

我們用什麼到目前爲止已經試過：

• This gives access to <parent-component>, we need <textarea> of <child-component>
• It's not about angular-tree-component
• The directive name is camelCased
• ElementRef seems to be an old thing
• This throws Cannot read property 'nativeElement' of undefined
• How is the reference between this.element.nativeElement & <input> element is getting established?
• There is no *ngIf or *ngSwitchCase
• There is no *ngIf used with #childComponentElement
• The call is inside ngAfterViewInit only
• Time out is a very dirty approach

Answer 1

有沒有簡單的方法來此與嵌套的組件，你必須創建一個EventEmitter發出的ElementRef您嘗試訪問的元素：

個

child.component.ts

class ChildComponent implements AfterViewInit { 

    @Output() 
    templateLoaded: EventEmitter<ElementRef> = new EventEmitter() 

    @ViewChild('childComponentElement') el: ElementRef 

    ngAfterViewInit(): void { 
     this.templateLoaded.emit(this.el) 
    } 
} 

parent.component.html

<child-component (templateLoaded)="templateLoaded($event)" 

parent.component。TS

class ParentComponent { 

    templateLoaded(template: ElementRef): void { 
     // do stuff with the `template` 
    } 
} 

原來的答案

嘗試使用。如果你想知道的第二個參數ViewChild

@ViewChild('childComponentElement', {read: ElementRef}) el: ElementRef 

第二個參數的read屬性，這個答案給出了一個很好說明：What is the read parameter in @ViewChild for