Angular의 구성요소 간 통신을 위한 여러 방법에 대한 자세한 설명

이 기사에서는 Angular의 다양한 유형의 구성 요소 간 통신에 대해 자세히 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular 구성 요소 간 통신

---

구성 요소 간의 세 가지 일반적인 관계:

• 상위 구성 요소 간 상호 작용(@Input/@Output/템플릿 변수/@ViewChild)

• 상호 작용 비 사이 -부모-자식 구성 요소(서비스/로컬 스토리지)

• 통신 등에 세션 및 라우팅 매개 변수를 사용할 수도 있습니다.

추천 튜토리얼: "angular 튜토리얼"

부모-자식 구성 요소 간의 상호 작용

하위 구성 요소 쓰기

• child.comComponent.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  private _childTitle = '我是子组件';

  @Input()
  set childTitle(childTitle: string) {
    this._childTitle = childTitle;
  }

  get childTitle(): string {
    return this._childTitle;
  }

  @Output()
  messageEvent: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {

  }

  sendMessage(): void {
    this.messageEvent.emit(&#39;我是子组件&#39;);
  }

  childFunction(): void {
    console.log(&#39;子组件的名字是：&#39; + this.childTitle);
  }

}

• child.comComponent.html

<div class="panel panel-primary">
  <div class="panel-heading">{{childTitle}}</div>
  <div class="panel-body">
      <button (click)="sendMessage()" class="btn btn-success">给父组件发消息</button>
  </div>
</div>

부모 구성 요소

• parent-and-child.com.t s

@Component({
  selector: 'app-parent-and-child',
  templateUrl: './parent-and-child.component.html',
  styleUrls: ['./parent-and-child.component.css']
})
export class ParentAndChildComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  doSomething(event: any): void {
    alert(event);
  }

}

• parent-and-child.comComponent.html

<div class="panel panel-primary">
  <div class="panel-heading">父组件</div>
  <div class="panel-body">
    <app-child #child (messageEvent) = "doSomething($event)"></app-child>
    <button (click)="child.childFunction()" class="btn btn-success">调用子组件的方法</button>
  </div>
</div>

@Input 속성 바인딩은 단방향입니다. 상위 구성 요소의 속성 변경 사항은 하위 구성 요소의 속성 변경 사항에 영향을 미치며 하위 구성 요소의 속성 변경 사항은 상위 구성 요소에 영향을 미치는 속성 변경 사항은 되돌릴 수 없습니다.

그러나 @Input() 및 @Output()을 사용하여 속성의 양방향 바인딩을 달성할 수 있습니다.

@Input()
value: string;
@Output()
valueChange: EventEmitter<any> = new EventEmitter();

// 实现双向绑定
<input [(value)] = "newValue"></input>

참고: 양방향 바인딩에 [()]를 사용하는 경우 출력 속성 이름은 입력 속성 이름과 변경으로 구성되어야 하며 형식은 xxxChange입니다.

비상위 구성요소와 하위 구성요소 간의 상호 작용

서비스를 사용하여 상호 작용

• event-bus.service.ts

/**
 * 用于充当事件总线
 */
@Injectable()
export class EventBusService {

  evnetBus: Subject<string> = new Subject<string>();

  constructor() { }
}

• child1.comComponent.ts

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component implements OnInit {

  constructor(private eventBusService: EventBusService) { }

  ngOnInit(): void {
  }

  triggerEventBus(): void {
    this.eventBusService.evnetBus.next('child1 触发的事件');
  }
}

• child1.com.html ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
localStorage를 사용하여 상호작용

ㅋㅋ

• local -storage.comComponent.ts

<div class="panel panel-primary">
  <div class="panel-heading">child1 组件</div>
  <div class="panel-body">
    <button (click)="triggerEventBus()" class="btn btn-success">触发事件</button>
  </div>
</div>

• local-storage.comComponent.html

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component implements OnInit {

  events: Array<string> = new Array<string>();

  constructor(private eventBusService: EventBusService) { }

  ngOnInit(): void {
    this.listenerEvent();
  }

  listenerEvent(): void {
    this.eventBusService.evnetBus.subscribe( value => {
      this.events.push(value);
    });
  }
}

마지막으로 데이터 상호작용을 달성하기 위해 세션 및 라우팅 매개변수를 사용하는 방법은 여기서 설명하지 않습니다.
• 더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 Angular의 구성요소 간 통신을 위한 여러 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!