Angular开发问题记录:组件拿不到@Input输入属性

最近在工作中实现一个feature的时候,碰到一个小问题:Angular组件拿不到@Input输入属性的问题,尽管对这些问题都比较了解,但是找问题是需要一个过程的,所以还是把这个问题总结记录了下。我需要给一个Component设置一个输入属

最近在工作中实现一个feature的时候,碰到一个小问题:Angular组件拿不到@Input输入属性的问题,尽管对这些问题都比较了解,但是找问题是需要一个过程的,所以还是把这个问题总结记录了下。

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>

然后发现MyMenuWidget里的输入属性isMainMenu始终拿不到值,难道哪里拼写有问题吗?检查了一下,发现完全没有问题,但就是拿不到值。

定睛一看,啊啊啊???,对一个Observable的订阅居然写在了构造函数里!!!尽管这样写在一些场景下是可以正常工作的,不影响代码功能,但是这种写法很不规范,就像上面例子中的代码一样,引起了问题。所以,平时开发过程中, 不建议去这么写,那正确的写法是什么呢?

上代码。

@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函数的区别是什么呢?

区别一

语言上的区别:

先从语言的角度上看一下他们的区别。ngOnInit只是组件类上的一个方法,结构上和类上的其他方法没有什么不同,只是有一个特定的名字。

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

实现不实现他都是可以的,我还可以这么写,完全没有问题。无需显示的标记要实现这个接口。

export class MyMenuWidget {
   ngOnInit() {}
}

这是ES6的写法,上面的代码用ES5怎么写呢?

构造函数和他完全不一样,他会在创建类实例的时候会被调用。

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

区别二

组件初始化过程的区别:

从组件初始化角度来看两者的区别,还是很大的。Angular的启动过程有两个主要阶段:
1. 构造组件树; 2. 执行变更检测

当Angular构造组件树时候,需要创建组件实例,首先就会调用构造函数new 一个实例出来,也就是调用组件类的构造函数。然后调用,包括ngOnInit的所有生命周期钩子都作为变更检测阶段的一部分被调用。

当Angular开始变更检测时,组件树已经构建好,并且已经调用树中所有组件的构造函数。此外,此时每个组件的模板节点都添加到DOM中。 在这里,你可以使用初始化组件所需的所有数据——DI provider,DOM等。@Input通信机制作为变更检测阶段的一部分进行处理的,所以@Input在构造函数中不可用。

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

区别三

功能上的区别:

对于Angular构造函数,主要用来初始化,和注入依赖关系。通常的做法是,尽可能少放逻辑到构造函数中,有时候,尽管你放了很多逻辑但不影响功能。

对于ngOnInit,Angular在创建组件的DOM,使用构造函数注入所有必须的依赖,完成初始化后调用ngOnInit,这是执行组件初始化逻辑的好地方。

简单的说 ,constructor构造函数本身是和Angular无关的,ngOnInit这些钩子函数是Angular里定义的。

总结

现在是不是清楚为什么@Input在构造函数里拿不到值的了吧。以后也清楚哪些逻辑放构造函数里,哪些放ngOnInit里了吧。

本站内容转自网络,若侵犯了你的权益,请联系我们,我们将在第一时间删除。

如若转载,请注明出处:http://www.ntuku.com/18885.html