無法獲取未定義的屬性'nativeElement'或空參考角度2

Question

我試圖隱藏其他鏈接，當單擊其中一個鏈接時，我已嘗試在組件中使用「Viewchild」來訪問名稱屬性的錨標籤。請在組件中找到下面的代碼。

import { Component, ElementRef, ViewChild } from '@angular/core'; 


@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular App</h1> 
<div style="float:right;"> 
       <a routerLink="First" *ngIf="!isOn" (click)="setState(first)" let name="first">First</a> | 
       <a routerLink="Second" *ngIf="!isOn" (click)="setState(second)" let name="second">Second</a> | 
       <a routerLink="Third" *ngIf="!isOn" (click)="setState(third)" let name="third">Third</a> | 
       <a routerLink="Fourth" *ngIf="!isOn" (click)="setState(fourth)" let name="fourth">Fourth</a> 
</div> 
<br/> 
<div> 
<router-outlet></router-outlet> 
</div> 
` 
}) 
export class AppComponent { 


    private isOn: boolean = false; 
    private trst: string; 


    @ViewChild('name') input3: ElementRef; 


    ngAfterViewInit() { 
     console.log(this.input3.nativeElement); 
    } 

    setState(e: any): void { 

     var native = this.input3.nativeElement; //throws error here 

     var myattr = native.getAttribute("input3"); 
     alert("my attribute value is from click : " + myattr);  

     this.trst = this.input3.nativeElement.value; 
     alert(this.trst); 
     alert(e); 

     if (this.trst == e) 
     { 
      this.isOn = false; 
     } 
     else 
     { 
      this.isOn = true; 
     } 
    } 

} 

什麼是錯上面的代碼訪問的元素與viewchild，有沒有在那裏我可以訪問定位標記的name屬性值的任何其他方式？

我試着跟隨下面的鏈接來解決，但在解決問題

@viewChild not working - cannot read property nativeElement of undefined

Answer 1

我可以看到幾件事情你的代碼錯誤沒有運氣。對於初學者，您應該在錨標記中使用#name="first"而不是let name="first"。但是，你有多個具有相同名稱的ViewChildren，它仍然無法工作。

訪問原始DOM元素可能不是這裏的答案。我寧願做這樣的事情：

import { Component, ElementRef, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular App</h1> 
<div style="float:right;"> 
       <a routerLink="First" *ngIf="isSelected('first')" (click)="setState('first')">First</a> | 
       <a routerLink="Second" *ngIf="isSelected('second')" (click)="setState('second')">Second</a> | 
       <a routerLink="Third" *ngIf="isSelected('third')" (click)="setState('third')">Third</a> | 
       <a routerLink="Fourth" *ngIf="isSelected('fourth')" (click)="setState('fourth')">Fourth</a> 
</div> 
<br/> 
<div> 
<router-outlet></router-outlet> 
</div> 
` 
}) 
export class AppComponent { 
    private selectedLink: string; 

    setState(e: string): void { 
     this.selectedLink = e; 
    } 

    isSelected(name: string): boolean { 
     if (!this.selectedLink) { // if no link is selected, always return true so everything is shown 
      return true; 
     } 

     return (this.selectedLink === name); // if current link is selected, return true, else return false 
    } 
}