亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular組件拿不到@Input輸入屬性問題探究解決方法

 更新時間：2023年01月31日 17:02:51   作者：憂郁的蛋~  
最近在工作中實現一個feature的時候，碰到一個小問題：Angular組件拿不到@Input輸入屬性的問題，盡管對這些問題都比較了解，但是找問題是需要一個過程的，所以還是把這個問題總結記錄了下

我需要給一個Component設置一個輸入屬性 @Input，好了，直接上代碼，沒有什么難度。

原代碼是這樣的：

@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;
        });
    }
  ...
}

添加一個輸入屬性：

@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ā)現MyMenuWidget里的輸入屬性isMainMenu始終拿不到值，難道哪里拼寫有問題嗎？檢查了一下，發(fā)現完全沒有問題，但就是拿不到值。

定睛一看，啊啊??？？？，對一個Observable的訂閱居然寫在了構造函數里?。?！盡管這樣寫在一些場景下是可以正常工作的，不影響代碼功能，但是這種寫法很不規(guī)范，就像上面例子中的代碼一樣，引起了問題。所以，平時開發(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里就可以正常工作呢？有人會說，我們就是應該放ngOnInit里就行了，放構造函數里就是不行。那為啥不行呢，需要去弄明白。

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

區(qū)別一

語言上的區(qū)別：

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

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

實現不實現他都是可以的，我還可以這么寫，完全沒有問題。無需顯示的標記要實現這個接口。

export class MyMenuWidget {
   ngOnInit() {}
}

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

構造函數和他完全不一樣，他會在創(chuàng)建類實例的時候會被調用。

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

區(qū)別二

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

從組件初始化角度來看兩者的區(qū)別，還是很大的。Angular的啟動過程有兩個主要階段：

1. 構造組件樹；

2. 執(zhí)行變更檢測；

當Angular構造組件樹時候，需要創(chuàng)建組件實例，首先就會調用構造函數new 一個實例出來，也就是調用組件類的構造函數。然后調用，包括ngOnInit的所有生命周期鉤子都作為變更檢測階段的一部分被調用。

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

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

區(qū)別三

功能上的區(qū)別：

對于Angular構造函數，主要用來初始化，和注入依賴關系。通常的做法是，盡可能少放邏輯到構造函數中，有時候，盡管你放了很多邏輯但不影響功能。

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

簡單的說 ，constructor構造函數本身是和Angular無關的，ngOnInit這些鉤子函數是Angular里定義的。

總結

現在是不是清楚為什么@Input在構造函數里拿不到值的了吧。以后也清楚哪些邏輯放構造函數里，哪些放ngOnInit里了吧。

到此這篇關于Angular組件拿不到@Input輸入屬性問題探究解決方法的文章就介紹到這了,更多相關Angular @Input輸入屬性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論