각도 개발 문제 기록: 구성 요소가 @Input 입력 속성을 가져올 수 없습니다.

최근 직장에서 기능을 구현할 때 작은 문제가 발생했습니다. Angular컴포넌트에서 @Input 입력 속성을 가져올 수 없습니다. 이러한 문제는 비교적 익숙하지만 문제를 찾는 과정이 필요하기 때문에 여전히 문제가 있습니다. 이 문제를 요약하고 기록하십시오.

【관련 튜토리얼 추천: "angular Tutorial"】

입력 속성 @Input을 Component로 설정해야 합니다. 좋습니다. 코드를 시작하면 됩니다. 어렵지 않습니다.

원본 코드는 다음과 같습니다:

@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 함수의 차이점이 무엇입니까?

차이점 1

언어의 차이:

먼저 언어적 관점에서 차이점을 살펴보겠습니다. ngOnInit은 구성 요소 클래스의 메서드일 뿐이며 그 구조는 클래스의 다른 메서드와 다르지 않으며 특정 이름만 있습니다.

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

구현해도 괜찮아요. 그래도 이렇게 쓸 수 있어요. 전혀 문제 없어요. 이 인터페이스를 구현하기 위해 명시적인 마커가 필요하지 않습니다.

export class MyMenuWidget {
   ngOnInit() {}
}

ES6 작성 방법입니다. ES5에서는 위 코드를 어떻게 작성하나요?

생성자는 클래스 인스턴스를 생성할 때 호출됩니다.

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

차이점 2

컴포넌트 초기화 프로세스의 차이점:

컴포넌트 초기화의 관점에서 보면 둘 사이의 차이는 여전히 매우 큽니다. Angular의 시작 프로세스는 두 가지 주요 단계로 구성됩니다.
1. 구성 요소 트리 구성 2. 변경 감지 수행

Angular가 구성 요소 트리를 구성할 때 먼저 생성자 new가 호출됩니다. 즉, 구성 요소 클래스의 생성자를 호출합니다. 그런 다음 ngOnInit를 포함한 모든 수명 주기 후크가 변경 감지 단계의 일부로 호출됩니다.

Angular가 변경 감지를 시작하면 구성 요소 트리가 구축되고 트리에 있는 모든 구성 요소의 생성자가 호출됩니다. 또한 이 시점에서 각 구성 요소의 템플릿 노드가 DOM에 추가됩니다. 여기서는 DI 공급자, DOM 등 구성 요소를 초기화하는 데 필요한 모든 데이터에 액세스할 수 있습니다. @Input 통신 메커니즘은 변경 감지 단계의 일부로 처리되므로 생성자에서 @Input을 사용할 수 없습니다.

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

차이 3

기능적 차이:

Angular

constructor의 경우 주로 초기화 및 종속성 주입에 사용됩니다. 일반적인 접근 방식은 생성자에 로직을 최대한 적게 넣는 것입니다. 때로는 로직을 많이 넣어도 기능에 영향을 미치지 않습니다.

ngOnInit의 경우 Angular는 컴포넌트의 DOM을 생성하고 생성자를 사용하여 필요한 모든 종속성을 주입하고 초기화 완료 후 ngOnInit을 호출합니다. 이는 컴포넌트 초기화 로직을 실행하기에 좋은 곳입니다.

간단히 말하면

생성자 생성자 자체는 Angular와 아무런 관련이 없습니다. ngOnInit이 후크 함수는 Angular에 정의되어 있습니다.

Summary

이제 @Input이 생성자에서 값을 가져올 수 없는 이유가 분명해졌습니다. 앞으로는 어떤 로직을 생성자에 배치해야 하고 어떤 로직을 ngOnInit에 배치해야 하는지 명확해질 것입니다.

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 교육을 방문하세요! !

위 내용은 각도 개발 문제 기록: 구성 요소가 @Input 입력 속성을 가져올 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!