角度における成分相互作用

9410 ワード

angular javascript webdev tutorial テキストリンク

こんにちはみんな、私は角で私の最初のブログを書いています.私たちが知っているように、角度はモジュールコンポーネントベースのフロントエンドエンドフレームワークです.
このチュートリアルでは、さまざまな方法で角度でコンポーネント間のデータを共有する方法を学びます.私はそれらを簡単に理解できるように提供しています.
子コンポーネント(入力デコレータ)への親コンポーネントを通したコミュニケーション

子コンポーネントを親コンポーネント( viewchild装飾子)に伝える

子コンポーネントを親コンポーネント(出力/EventEmitatorデコレータ)に伝える
サービスを提供している兄弟のコンポーネントを通したコミュニケーション
**

親コンポーネントを介した子要素への通信(入力修飾子)

**
データのバインディングを持つテンプレートを介してデータを渡すことができる入力デコレータを介してデータ共有を導入する最も一般的な方法です.ここでは、親コンポーネントを介して子コンポーネントにデータリストを共有する.私は、このようにデータリストを示しています.
親.コンポーネント.TS

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="dataList"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public dataList: ParentDataList[] = PARENT_DATA_LIST;
  constructor() { }
  ngOnInit(): void {
  }
}

チャイルド.コンポーネント.TS

@Component({
  selector: 'app-child',
  template: `<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Id</th>
      <th>User ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
    <tr *ngFor="let item of data">
      <td>{{item.id}}</td>
      <td>{{item.userId}}</td>
      <td>{{item.title}}</td>
      <td>{{item.body}}</td>
    </tr>
  </table>
</div>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Input() data!: ParentDataList[];
  constructor() { }
  ngOnInit(): void {
  }
}

子コンポーネントを親コンポーネントへのコミュニケーション

**
ViewChild装飾子は、子コンポーネントを介して親コンポーネントにデータを渡すことができます.親コンポーネントにViewChildを注入すると、変数と関数を使用して親にアクセスできます.私はこの方法でリストを追加しようとしています.
親.コンポーネント.TS

@Component({
  selector: 'app-parent',
  template: `<button class="primary-btn" (click)="addList()">Add List</button>
<app-child></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;
  constructor() { }
  ngOnInit(): void {
  }
  addList(){
     let obj = {
        id: 1,
        userId: 123,
        title: 'ankit',
        body:'every thing mcm complrter'
      }
     this.child.arrList = [...this.child.arrList, obj];
  }
  ngAfterViewInit(){
    this.child.showList(true);
  }
}

チャイルド.コンポーネント.TS

@Component({
  selector: 'app-child',
  template: `<table *ngIf="collapseList" class="table">
  <tr *ngFor="let item of arrList;let i=index;">
    <td>{{item.id}}{{i}}</td>
    <td>{{item.userId}}{{i}}</td>
    <td>{{item.title}}{{i}}</td>
    <td>{{item.body}}{{i}}</td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  public collapseList!: boolean
  public arrList:DataList[] = [];
  constructor() { }
  ngOnInit(): void {}
  showList(value:any){
    this.collapseList = value;
  }
}

子コンポーネントを親コンポーネントに出力する(出力/ EventEmitatorデコレータ)

**
出力デコレータ、これは、子要素から親コンポーネントへのデータと同様に、イベントのエミッタを介して子コンポーネントから親コンポーネントへデータを共有する別の方法です.それは角度でのイベントバインディングのように動作します.私たちは、イベントの任意の種類のデータを共有することができますこのような変更のように、クリックなどで私は小さな追加/乗算/減算/分割機能をこの方法で作成します.
親.コンポーネント.TS

@Component({
  selector: 'app-parent',
  template: `<div class="row">
  <div class="col-md-2">
    <input #text1 (change)="text1Data(text1.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-1">
    <h2 class="ak-title-lg">{{optSymbal}}</h2>
  </div>
  <div class="col-md-2">
    <input #text2 (change)="text2Data(text2.value)" type="number" value="0" class="form-control">
  </div>
  <div class="col-md-1">
    <p class="ak-title">=</p>
  </div>
  <div class="col-md-3">
    <input type="text" class="form-control" [value]="result" disabled>
  </div>
</div>
<app-child (btnClick)="operationClick($event)"></app-child>`,
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
  public inputValue1: number = 0;
  public inputValue2: number = 0;
  public result: number = 0;
  public optSymbal:any;
  constructor() {}
  text2Data(value: number) {
    this.inputValue2 = value;
  }
  text1Data(value: number) {
    this.inputValue1 = value;
  }
  ngOnInit(): void {}
  operationClick($event: any) {
    this.optSymbal = $event;
    switch ($event) {
      case OPERATION.addition:
        this.result = this.inputValue1 + this.inputValue2;
        break;
      case OPERATION.subtract:
        this.result = this.inputValue1 - this.inputValue2;
        break;
      case OPERATION.multiply:
        this.result = this.inputValue1 * this.inputValue2;
        break;
      case OPERATION.division:
        this.result = this.inputValue1 / this.inputValue2;
        break;
      default:
        break;
    }
  }
}

チャイルド.コンポーネント.TS

@Component({
  selector: 'app-child',
  template: `<table class="table">
  <tr class="row">
    <td class="col-md-3 col-6" *ngFor="let item of btnArr;let i=index;">
      <button class="primary-btn" (click)="changeData(item.opt)">{{item.title}}</button>
    </td>
  </tr>
</table>`,
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
  @Output() btnClick:EventEmitter<any> = new EventEmitter();
  btnArr = BTN_OPERATION_ARR;
  constructor() { }
  ngOnInit(): void {
  }
  changeData(value:string){
    this.btnClick.emit(value);
  }
}

兄弟の構成要素によるコミュニケーション（サービスとして）

**
この方法では、複数のシナリオを使用してrxjs、get/setメソッドとより多くの方法を経由します.ここでは、getter/setterメソッドを使って説明します.それで、私はサービスメソッドを通してデータを見せて、隠しています.
1コンポーネント.TS

@Component({
  selector: 'app-sibling1',
  template: `<p>sibling1 works!</p>
<h2 class="ak-title">This is a <span [ngClass]="{'true': show_flag, 'false': !show_flag}">{{show_flag ? 'True':'False'}}</span> condition</h2>
<a class="primary-btn" routerLink="child">Go to child >>></a>`,
  styleUrls: ['./sibling1.component.scss']
})
export class Sibling1Component implements OnInit {
  show_flag:any;
  constructor(private dataService: DataService) { }
  ngOnInit() {
    this.getData()
  }
  getData(){
    this.show_flag = this.dataService.getData();
  }
}

2コンポーネント.TS

@Component({
  selector: 'app-sibling2',
  template: `<button class="primary-btn" routerLink="/">Back</button>
<app-contact [data]="contactData"></app-contact>
<p>child works!</p>
<button class="secondary-btn" (click)="changeCondition()">Change Condition</button><br><br>
<a class="primary-btn" routerLink="/service-based"> <<< Go to Parent</a>`,
  styleUrls: ['./sibling2.component.scss']
})
export class Sibling2Component implements OnInit {
  contactData = CONTACT_HEADER;
  constructor(private dataService: DataService) { }
  changeValue:any;
  ngOnInit() {
    this.changeValue = this.dataService.getData();
  }
  changeCondition(){
    this.changeValue = !this.changeValue;
    this.dataService.setData(this.changeValue);
    alert('Done, Now click on Go to Parent');
  }
}

データ.サービスTS

@Injectable({
  providedIn: 'root'
})
export class DataService {
  public isEnable: boolean = false;
  constructor() { }
  // we are communication data between two component via service -- getter/setter method
  //-----------------------------------------------------------
  // setter method
  setData(data:any){
    this.isEnable = data;
  }
  // getter method
  getData(){
    return this.isEnable;
  }
}

任意のクエリや疑問がある場合は、クイックコメントを追加してください質問を解決しようとします.
GitHub Source Code
Demo
より多くのJavaScriptと角の記事の私に従ってください.
また、Medium、およびGitHubの上で私に従ってください、そして、コード質問の上で手で記事のより多くの最新版のために.

Reference

この問題について(角度における成分相互作用), 我々は、より多くの情報をここで見つけました https://dev.to/ankitkumarsharma/component-interaction-in-angular-5cn2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

EventBus(一)

ランチャーAPIを使用したEKS , AK , GAKの作成