각도 - @입력 및 @출력 대주입식 서비스

각도 - @입력 및 @출력 대주입식 서비스

나는 내 자신에게 어디가 다른지 묻고 있습니다.@Input/@Output상위/하위 구성 요소 및 종속성 주입으로 한 번만 초기화된 서비스 사용@Injectable()또는 Input/Output 이외에 parent-/child-comp에서만 사용할 수 있는 차이점이 있습니까?

시각화 개선을 위한 다음 예:

@입력 사용:

<parent-comp>
   <child-comp [inputFromParent]="valueFromParent"></child-comp>
</parent-comp>

하위 구성 요소:

@Component({
  selector: 'child-comp',
  template: ...
})
export class ChildComponent {
  @Input() public inputFromParent: string;
}

종속성 주입 포함

@Injectable()
export class Service {
   private value: string;

public get value(): string {
   return value;
}

public set value(input): void {
   value = input;
}

}

이제 상위 컴파운드에서 값을 설정하고 종속성 주입을 통해 하위 컴파운드에서 값을 가져올 수 있습니다.하위 구성 요소:

@Component({
  selector: 'child-comp',
  template: ...
})
export class ChildComponent {
  private value: string;
  constructor(private service: Service) {
  this.value = this.service.getValue;
}

}

첫 번째 접근법이 더 간단해 보이지만, 저는 부모/자녀 콤프를 통해 전달되는 3-4개의 속성을 사용하는 것을 인식했습니다.와 함께@Input/@Output탬플릿을 매우 혼란스럽고 투박하게 만듭니다.

대답이 명확한 질문은 아니지만..

@Input그리고.@Output부모와 자식 간의 통신이 부모와 자식 간의 통신일 경우 유용합니다.단 2개의 구성요소(또는 깊이 중첩된 조부모 -> 부모 -> 자식 구성요소)에 대해 싱글톤 데이터를 유지하는 서비스를 갖는 것은 말이 되지 않을 것입니다.

또한 부모가 자녀의 변화에 반응해야 할 경우에도 유용합니다.예를 들어 하위 구성 요소에서 상위 기능을 호출하는 버튼을 클릭하면 다음과 같습니다.

<my-child-component (myOutputEmitter)="reactToChildChange($event)"></my-child-component>

그리고 부모님:

reactToChildChange(data: any) {
  // do something with data
}

만약 당신이 많은 것을 통과하는 자신을 발견한다면.@Input템플릿을 정리하려는 경우 입력에 대한 인터페이스를 정의하고 대신 전달할 수 있습니다.

export interface MyChildProperties {
   property?: any;
   anotherProperty?: any;
   andAnotherProperty?: any;
}

그런 다음 부모로부터 설정된 정의를 자녀에게 전달할 수 있습니다.

childProperties: MyChildProperties = {
    property: 'foo',
    anotherProperty: 'bar',
    andAnotherProperty: 'zoob'
}

그러면 하위 구성 요소에 다음이 있을 수 있습니다.

@Input properties: MyChildProperties;

템플릿은 다음과 같습니다.

<my-child-component [properties]="childProperties"></my-child-component>

자녀가 다음에서 해당 속성에 액세스할 수 있습니다.properties.property,properties.anotherProperty,기타.

이제 데이터가 통신이 필요한 구성 요소에 포함됩니다.

그러나 전체 애플리케이션에서 데이터를 읽고 쓰기 위해 둘 이상의 구성 요소에 액세스해야 하는 경우에는 서비스를 사용해야 합니다.고려:UserService예를 들어, 다양한 구성 요소가 현재 로그인한 사용자에 액세스할 수 있어야 합니다.이 경우 서비스는 싱글톤이므로 합리적입니다. 따라서 로그인한 사용자를 설정한 후에는 모든 구성 요소를 주입합니다.UserService데이터 및 기능에 액세스할 수 있습니다.

마찬가지로, 변화에 대응하기 위해 서비스를 사용하는 경우 구성 요소가 데이터의 변경 사항에 가입할 수 있도록 관찰 가능한 항목으로 서비스를 작성할 수 있습니다.이미 이미 이 패턴을 제공하는 에미터도@Output상술한 바와 같이

만약 그것이 단순한 부모 -> 자녀 통신이었다면, 이것은 불필요한 간접비이며, 피해야 합니다.

즉, 글로벌 상태를 관리하기 위해 서비스를 사용하는 자신을 발견하면 ngrx와 같은 상태 관리를 사용하는 것이 더 나을 것입니다.

언급URL : https://stackoverflow.com/questions/51027711/angular-input-and-output-vs-injectable-service