상위 구성 요소의 속성 액세스

상위 구성 요소의 속성 액세스

상위 레벨에 속성이 있습니다. 이렇게 HTTP 소스의 데이터를 사용하는 Component(구성 요소)입니다.app.ts):

import {UserData} from './services/user-data/UserData';

Component({
    selector: 'app', // <app></app>
    providers: [...FORM_PROVIDERS],
    directives: [...ROUTER_DIRECTIVES],
    pipes: [],
    template: require('./app.html')
})
@RouteConfig([
    // stuff here
])

export class App {
    // Please note that UserData is an Injectable Service I have written
    userStatus: UserStatus;

    constructor(private userData: UserData) {
        this.userStatus = new UserStatus();
    }

    ngOnInit() {
        this.userData.getUserStatus()
            .subscribe(
            (status) => {
                this.userStatus = status; // I want to access this in my Child Components...
            },
            (err) => {console.log(err);},
            () => {console.log("User status complete");            }
        );
    }
}

의 Component의 Component가 그 'Component 인 에서 의 에 의 의 에 의 에서 userStatus:', 가 가 .

Component({
    selector: 'profile',
    template: require('app/components/profile/profile.html'),
    providers: [],
    directives: [],
    pipes: []
})

export class Profile implements OnInit {
    constructor() {

    }

    ngOnInit() {
        // I want to have access with the parent App Component, 'userStatus' propety here... I only want to read this property
    }
}

1에서는 Angular 1.x 가 할 은 입니다 에서는 입니다 은 가 할 $parent내 자식 컨트롤러 또는 (ANTI PATNERTAINT ALERT!!!)이 데이터를 제 안에 집어넣으면 정말 바보같을 수 있습니다.$rootScope.

Angular 2에서 부모에게 접근하는 가장 좋은 방법은 무엇입니까?

다른 방법이 있습니다.

• 세계적 서비스

  • 참고.
  • https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
  • 각도 2의 전역 이벤트
  • 플렁커

• 부모가 공유하고 아이에게 주사하는 서비스

  • 글로벌 서비스와 유사하지만 에 나열되어 있습니다.providers아니면viewProviders boostrap(...)부모의 자녀만 이용할 수 있습니다.

• 아이에게 주입되고 아이가 직접 접근하는 부모

  • 단점: 타이트 커플링

export class Profile implements OnInit {
constructor(@Host() parent: App) {
  parent.userStatus ...
}

• 데이터 바인딩

export class Profile implements OnInit {
  @Input() userStatus:UserStatus;
  ...
}

<profile [userStatus]="userStatus">

저도 같은 문제가 있었는데 다르게 해결했습니다.좋은 방법인지는 모르겠지만 제가 필요로 하는 것에는 아주 효과적입니다.

자식 구성 요소의 생성자에 @Inject를 사용했습니다. 다음과 같습니다.

import { Component, OnInit, Inject } from '@angular/core';
import { ParentComponent } from '../views/parent/parent.component';

export class ChildComponent{
    constructor(@Inject(ParentComponent) private parent: ParentComponent){

    }

    someMethod(){
        this.parent.aPublicProperty = 2;
    }
}

이것은 저에게 효과가 있었고, 당신은 당신이 전화하고 싶은 방법이나 재산을 공개적으로 신고하기만 하면 됩니다.

제 경우에는 AppComponent에서 라우팅을 처리하고 메뉴 항목의 배지를 사용하여 읽지 않은 새 메시지를 사용할 수 있음을 사용자에게 알리고 있습니다.그래서 사용자가 메시지를 읽을 때마다 해당 카운터를 새로 고치기를 원하기 때문에 메뉴 탐색에 있는 번호가 새 값으로 업데이트되도록 새로 고침 방법을 호출합니다.이것은 아마도 가장 좋은 방법은 아니지만, 저는 그것의 단순함이 마음에 듭니다.

부모님께 참고자료가 필요한 일반적인 부품을 만들었습니다.제가 생각해낸 것은 다음과 같습니다.

구성 요소에서 @Input:

@Input()
parent: any;

그런 다음 이 구성 요소를 사용하는 부모에서:

<app-super-component [parent]="this"> </app-super-component>

슈퍼 컴포넌트에서는 부모가 제공하는 모든 공용물을 사용할 수 있습니다.

속성:

parent.anyAttribute

기능:

parent[myFunction](anyParameter)

물론 사적인 물건은 접근할 수 없을 겁니다

할 수 있습니다.

• 정의하기userStatus자식 구성 요소에 대한 매개 변수를 지정하고 부모 구성 요소를 사용할 때 값을 제공합니다.

  @Component({
    (...)
  })
  export class Profile implements OnInit {
    @Input()
    userStatus:UserStatus;
  
    (...)
  }
  

  부모에서 다음을 수행합니다.

  <profile [userStatus]="userStatus"></profile>
  

• 자식 구성 요소에 부모를 주입합니다.

  @Component({
    (...)
  })
  export class Profile implements OnInit {
    constructor(app:App) {
      this.userStatus = app.userStatus;
    }
  
    (...)
  }
  

  그들 사이의 주기적인 의존성에 주의해야 합니다.

부모-자녀 상호작용은 쉬운 일이 아니기 때문입니다.하지만 자식 구성 요소에 부모 구성 요소에 대한 참조가 있으면 상호 작용이 훨씬 쉬워집니다.제 방법에서는 먼저 자식 구성 요소의 함수를 호출하여 부모 구성 요소의 참조를 전달해야 합니다.이 방법은 다음과 같습니다.

하위 구성 요소에 대한 코드입니다.

    import { Component, Input,ElementRef,Renderer2 } from '@angular/core';

    import { ParentComponent } from './parent.component';

    @Component({
      selector: 'qb-child',
      template: `<div class="child"><button (click)="parentClickFun()">Show text Of Parent Element</button><button (click)="childClickFun()">Show text Of Child Element</button><ng-content></ng-content></div>`,
      styleUrls: ['./app.component.css']
    })
    export class ChildComponent  {
      constructor(private el: ElementRef,private rend: Renderer2){

      };

      qbParent:ParentComponent; 
      getParent(parentEl):void{
        this.qbParent=parentEl;
        console.log(this.el.nativeElement.innerText);
      }
      @Input() name: string;
      childClickFun():void{
        console.log("Properties of Child Component is Accessed");
      }

      parentClickFun():void{
        this.qbParent.callFun();
      }
    }

상위 구성요소에 대한 코드입니다.

import { Component, Input , AfterViewInit,ContentChild,ElementRef,Renderer2} from '@angular/core';

import { ChildComponent } from './child.component';

@Component({
  selector: 'qb-parent',
  template: `<div class="parent"><ng-content></ng-content></div>`,
  styleUrls: ['./app.component.css']
})
export class ParentComponent implements AfterViewInit {
  constructor(private el: ElementRef,private rend: Renderer2){

  };
  @Input() name: string;
  @ContentChild(ChildComponent,{read:ChildComponent,static:true}) qbChild:ChildComponent;

  ngAfterViewInit():void{
    this.qbChild.getParent(this);
  }

  callFun():void{
    console.log("Properties of Parent Component is Accessed");
  }

}

HTML 코드

<qb-parent>
  This is Parent
  <qb-child>
    This is Child
  </qb-child>
</qb-parent>

여기서는 자식 구성 요소의 함수를 호출하여 부모 구성 요소를 전달합니다.아래 링크는 이 방법의 예시입니다.여기를 클릭하세요!

Angular 6에서 나는 컨스트럭터를 통해 부모를 주입하여 부모 속성에 액세스합니다.최선의 해결책은 아니지만 효과는 있습니다.

 constructor(@Optional() public parentComponentInjectionObject: ParentComponent){
    // And access like this:
    parentComponentInjectionObject.thePropertyYouWantToAccess;
}

상위 구성 요소에 대한 참조는 여러 가지 방법으로 찾을 수 있습니다.

@Input() dialogInput: DialogComponent; 

constructor(
 @Host() private dialogHost: DialogComponent,
 private dialogDirect: DialogComponent,
 @Inject(DialogComponent) private dialogInjected: DialogComponent,
 @Inject(forwardRef(() => DialogComponent)) private dialogForward: DialogComponent
 private injector: Injector
)
      
ngAfterViewInit(){
 const dialogInjector: DialogComponent = this.injector.get<DialogComponent>(DialogComponent);
}

구성 요소를 컨텐츠 프로젝션에서도 사용할 수 있도록 하려면 이 방법은 작동하지 않습니다.DI를 사용할 수 있도록 서비스가 필요할 것 같습니다.

속성 이름 앞에 static을 추가할 수도 있습니다. 예 - static myVariable = 5이고 자식 구성 요소에 부모 구성 요소를 가져온 다음 parentcomponent.myVariable; static 메서드를 사용하면 해당 속성을 외부 구성 요소에서 사용할 수 있습니다.

자식 구성 요소에서 #contentChild를 선언한 다음 부모에서 @ContentChild('contentChild') childContent를 선언합니다.

그러면. 이거. 어린이 콘텐츠.아이들에게 완전히 접근할 수 있게 해주는 것이 무엇이든 간에

언급URL : https://stackoverflow.com/questions/35267146/accessing-a-property-in-a-parent-component