本篇內(nèi)容介紹了“Angular組件拿不到@Input輸入屬性怎么解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

從事達(dá)州服務(wù)器托管，服務(wù)器租用，云主機(jī)，雅安服務(wù)器托管，空間域名，CDN，網(wǎng)絡(luò)代維等服務(wù)。

原代碼是這樣的：

@Component({
	selector: 'my-menu',
	templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
  data: any[];
  
  ...

    constructor(...) {
       this._changesSubscription = this._service.changes.pipe(
            map((data: any[]) => {
                    ...
                    return data;
            })
        ).subscribe((data: any[]) => {
            this.data = data;
        });
    }

  ...
}

添加一個(gè)輸入屬性：

@Component({
	selector: 'my-menu',
	templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
  @Input() isMainMenu: boolean = false;

  data: any[];
  
  ...

    constructor(...) {
        this._changesSubscription = this._service.changes.pipe(
                map((data: any[]) => {
                        ...
                        return data;
                })
        ).subscribe((data: any[]) => {
            if (this.isMainMenu) {
               this.data = data.filter((d: any) => d.ID === 233);
            }
            else {
              this.data = data;
            }
        });
    }

  ...
}

使用起來：

<my-menu [isMainMenu]="mainMenu"></my-menu>

然后發(fā)現(xiàn)MyMenuWidget里的輸入屬性isMainMenu始終拿不到值，難道哪里拼寫有問題嗎？檢查了一下，發(fā)現(xiàn)完全沒有問題，但就是拿不到值。

定睛一看，啊啊啊？？？，對(duì)一個(gè)Observable的訂閱居然寫在了構(gòu)造函數(shù)里?。。”M管這樣寫在一些場(chǎng)景下是可以正常工作的，不影響代碼功能，但是這種寫法很不規(guī)范，就像上面例子中的代碼一樣，引起了問題。所以，平時(shí)開發(fā)過程中， 不建議去這么寫，那正確的寫法是什么呢？

上代碼。

@Component({
	selector: 'my-menu',
	templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
  @Input() isMainMenu: boolean = false;

  data: any[];
  
  ...
  
  constructor(...) {
     ...
  }
  
    ngOnInit() {
        this._changesSubscription = this._service.changes.pipe(
            map((data: any[]) => {
                ...
                return data;
            })
        ).subscribe((data: any[]) => {
            if (this.isMainMenu) {
                    this.data = data.filter((d: any) => d.ID === 233);
            }
            else {
                this.data = data;
            }
        });
    }

  ...
}

那么問題來了，為什么同樣的代碼放ngOnInit里就可以正常工作呢？有人會(huì)說，我們就是應(yīng)該放ngOnInit里就行了，放構(gòu)造函數(shù)里就是不行。那為啥不行呢，需要去弄明白。

問題就是，Angular構(gòu)造函數(shù)和ngOnInit函數(shù)的區(qū)別是什么呢？

區(qū)別一

語言上的區(qū)別：

先從語言的角度上看一下他們的區(qū)別。ngOnInit只是組件類上的一個(gè)方法，結(jié)構(gòu)上和類上的其他方法沒有什么不同，只是有一個(gè)特定的名字。

export class MyMenuWidget implements OnInit { 
   ngOnInit() {}
}

實(shí)現(xiàn)不實(shí)現(xiàn)他都是可以的，我還可以這么寫，完全沒有問題。無需顯示的標(biāo)記要實(shí)現(xiàn)這個(gè)接口。

export class MyMenuWidget {
   ngOnInit() {}
}

這是ES6的寫法，上面的代碼用ES5怎么寫呢？

構(gòu)造函數(shù)和他完全不一樣，他會(huì)在創(chuàng)建類實(shí)例的時(shí)候會(huì)被調(diào)用。

export class MyMenuWidget {
   constructor(){}
  
   ngOnInit() {}
}

區(qū)別二

組件初始化過程的區(qū)別：

從組件初始化角度來看兩者的區(qū)別，還是很大的。Angular的啟動(dòng)過程有兩個(gè)主要階段：
1. 構(gòu)造組件樹； 2. 執(zhí)行變更檢測(cè)；

當(dāng)Angular構(gòu)造組件樹時(shí)候，需要?jiǎng)?chuàng)建組件實(shí)例，首先就會(huì)調(diào)用構(gòu)造函數(shù)new 一個(gè)實(shí)例出來，也就是調(diào)用組件類的構(gòu)造函數(shù)。然后調(diào)用，包括ngOnInit的所有生命周期鉤子都作為變更檢測(cè)階段的一部分被調(diào)用。

當(dāng)Angular開始變更檢測(cè)時(shí)，組件樹已經(jīng)構(gòu)建好，并且已經(jīng)調(diào)用樹中所有組件的構(gòu)造函數(shù)。此外，此時(shí)每個(gè)組件的模板節(jié)點(diǎn)都添加到DOM中。 在這里，你可以使用初始化組件所需的所有數(shù)據(jù)——DI provider，DOM等。@Input通信機(jī)制作為變更檢測(cè)階段的一部分進(jìn)行處理的，所以@Input在構(gòu)造函數(shù)中不可用。

export class MyMenuWidget {
   constructor(private _elementRef: ElementRef){
     ...
   }
  
   ngOnInit() {}
}

區(qū)別三

功能上的區(qū)別：

對(duì)于Angular構(gòu)造函數(shù)，主要用來初始化，和注入依賴關(guān)系。通常的做法是，盡可能少放邏輯到構(gòu)造函數(shù)中，有時(shí)候，盡管你放了很多邏輯但不影響功能。

對(duì)于ngOnInit，Angular在創(chuàng)建組件的DOM，使用構(gòu)造函數(shù)注入所有必須的依賴，完成初始化后調(diào)用ngOnInit，這是執(zhí)行組件初始化邏輯的好地方。

簡單的說 ，constructor構(gòu)造函數(shù)本身是和Angular無關(guān)的，ngOnInit這些鉤子函數(shù)是Angular里定義的。

“Angular組件拿不到@Input輸入屬性怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

當(dāng)前文章：Angular組件拿不到@Input輸入屬性怎么解決
文章來源：http://jinyejixie.com/article32/iisisc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、電子商務(wù)、響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站收錄、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)