Angular-Entwicklungspraxis (4): Interaktion zwischen Komponenten-js-Tutorial-php.cn

Bei der Angular-Anwendungsentwicklung kann man sagen, dass Komponenten überall vorhanden sind. In diesem Artikel werden mehrere gängige Komponentenkommunikationsszenarien vorgestellt, bei denen es sich um Methoden für die Interaktion zwischen zwei oder mehr Komponenten handelt.

Je nach Richtung der Datenübertragung wird sie in drei Typen unterteilt: Übergabe der übergeordneten Komponente an die untergeordnete Komponente , Übergabe der untergeordneten Komponente an die übergeordnete Komponente und durchläuft Service eine Interaktionsmethode.

Die übergeordnete Komponente übergibt

die untergeordnete Komponente über den @Input-Dekorator, um die Eingabeattribute zu definieren, und dann übergibt die übergeordnete Komponente diese Eingabeattribute beim Referenzieren an die untergeordnete Komponente Die untergeordnete Komponente übergibt Daten und Unterkomponenten können Änderungen in Eingabeattributwerten über setter oder ngOnChanges() abfangen.

Definieren Sie zunächst zwei Komponenten, nämlich 子组件DemoChildComponent und 父组件DemoParentComponent.

Unterkomponente:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    @Input() paramOne: any; // 输入属性1
    @Input() paramTwo: any; // 输入属性2
}

Nach dem Login kopieren

Die Unterkomponente definiert Eingabeattribute über @Input() paramOne und paramTwo (der Attributwert kann ein beliebiger Datentyp sein)

übergeordnete Komponente:

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
  `
})
export class DemoParentComponent {
    paramOneVal: any = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
}

Nach dem Login kopieren

Die übergeordnete Komponente verweist auf demo-child über den Selektor 子组件DemoChildComponent in seine Vorlage, und übergeben Sie die Daten über die beiden Eingabeattribute paramOne und paramTwo der Unterkomponente. Schließlich werden die beiden Textzeilen 传递给paramOne的数据 und 传递给paramTwo的数据 in der Vorlage angezeigt die Unterkomponente.

Abfangen von Änderungen in Eingabeattributwerten durch Setter

In praktischen Anwendungen müssen wir häufig entsprechende Vorgänge ausführen, wenn sich ein Eingabeattributwert ändert. Daher müssen wir zu diesem Zeitpunkt Go verwenden an den Setter des Eingabeattributs, um Änderungen im Eingabeattributwert abzufangen.

Wir werden 子组件DemoChildComponent wie folgt transformieren:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>{{paramOneVal}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    private paramOneVal: any;
    
    @Input() 
    set paramOne (val: any) { // 输入属性1
        this.paramOneVal = val;
        // dosomething
    };
    get paramOne () {
        return this.paramOneVal;
    };
    
    @Input() paramTwo: any; // 输入属性2
}

Nach dem Login kopieren

Im obigen Code können wir sehen, dass der abgefangene Wert paramOne durch den Setter des val-Attributs zugewiesen wird Geben Sie das interne private Attribut paramOneVal an, um den Effekt zu erzielen, dass Daten von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden. Das Wichtigste ist natürlich, dass Sie im Setter mehr andere Operationen ausführen können, was das Programm flexibler macht.

Verwenden Sie ngOnChanges(), um Änderungen in Eingabeattributwerten abzufangen.

通过 setter 截听输入属性值的变化 Die Methode kann nur Änderungen in einem einzelnen Attributwert überwachen, wenn Sie manchmal mehrere interaktive Eingabeattribute überwachen müssen , wird diese Methode unwirksam. Durch die Verwendung der ngOnChanges()-Methode der OnChanges-Lebenszyklus-Hook-Schnittstelle (wird aufgerufen, wenn sich der Wert der von der Komponente durch den @Input-Dekorator explizit angegebenen Variablen ändert) können Sie Änderungen der Werte mehrerer Eingabeeigenschaften gleichzeitig überwachen .

Hinzugefügt 子组件DemoChildComponent in ngOnChanges:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>{{paramOneVal}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent implements OnChanges {
    private paramOneVal: any;
    
    @Input() 
    set paramOne (val: any) { // 输入属性1
        this.paramOneVal = val;
        // dosomething
    };
    get paramOne () {
        return this.paramOneVal;
    };
    
    @Input() paramTwo: any; // 输入属性2
    
    ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
        for (let propName in changes) { // 遍历changes
            let changedProp = changes[propName]; // propName是输入属性的变量名称
            let to = JSON.stringify(changedProp.currentValue); // 获取输入属性当前值
            if (changedProp.isFirstChange()) { // 判断输入属性是否首次变化
                console.log(`Initial value of ${propName} set to ${to}`);
            } else {
                let from = JSON.stringify(changedProp.previousValue); // 获取输入属性先前值
                console.log(`${propName} changed from ${from} to ${to}`);
            }
        }
    }
}

Nach dem Login kopieren

Der von der neuen ngOnChanges-Methode changes empfangene Parameter basiert auf dem Namen des Eingabeattributs als Schlüssel und Wert ist SimpleChange Objekt, das SimpleChange-Objekt enthält Attribute wie z. B. ob sich das aktuelle Eingabeattribut zum ersten Mal ändert, vorheriger Wert, aktueller Wert usw. Daher können in der ngOnChanges-Methode mehrere Eingabeattributwerte überwacht und entsprechende Vorgänge durch Durchlaufen des changes-Objekts ausgeführt werden.

Rufen Sie die Instanz der übergeordneten Komponente ab

Wie oben erwähnt, definiert die untergeordnete Komponente das Eingabeattribut über @Input装饰器, sodass die übergeordnete Komponente Daten über das Eingabeattribut an die untergeordnete Komponente übergeben kann.

Natürlich können wir uns eine proaktivere Methode vorstellen, die darin besteht, die Instanz der übergeordneten Komponente abzurufen und dann eine Eigenschaft oder Methode der übergeordneten Komponente aufzurufen, um die erforderlichen Daten zu erhalten. Angesichts der Tatsache, dass jede Komponenteninstanz dem Container des Injektors hinzugefügt wird, kann ein Beispiel der übergeordneten Komponente über die Abhängigkeitsinjektion gefunden werden.

子组件获取父组件实例 ist problematischer als 父组件获取子组件实例 (direkt über 模板变量, @ViewChild oder @ViewChildren erhalten).

Um die Instanz der übergeordneten Komponente in der untergeordneten Komponente abzurufen, gibt es zwei Situationen:

Der Typ der übergeordneten Komponente ist bekannt

In dieser Situation kann eine übergeordnete Komponentenreferenz eines bekannten Typs direkt durch Einfügen von DemoParentComponent in den Konstruktor abgerufen werden. Das Codebeispiel lautet wie folgt:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    paramOne: any;
    paramTwo: any;
    
    constructor(public demoParent: DemoParentComponent) {
        
        // 通过父组件实例demoParent获取数据
        this.paramOne = demoParent.paramOneVal;
        this.paramTwo = demoParent.paramTwoVal;
    }
}

Nach dem Login kopieren

Der Typ der unbekannten übergeordneten Komponente
Eine Komponente Es kann eine Unterkomponente mehrerer Komponenten sein. In Angular kann der Typ der übergeordneten Komponente nicht direkt ermittelt werden, d. h. die übergeordnete Komponente kann hilfreich sein indem Sie einen Alias mit demselben Namen wie die 类—接口（Class-Interface）-ID angeben. 类—接口
Erstellen Sie zunächst die abstrakte Klasse DemoParent, die nur die Attribute
und paramOneVal ohne Implementierung (Zuweisung) deklariert. Der Beispielcode lautet wie folgt: paramTwoVal
```
export abstract class DemoParent {
    paramOneVal: any;
    paramTwoVal: any;
}
```
Nach dem Login kopieren
und dann in
父组件DemoParentComponentDefinieren Sie einen Alias-Provider in den Metadaten und verwenden Sie useExisting, um eine Instanz der übergeordneten Komponente DemoParentComponent einzufügen. Das Codebeispiel lautet wie folgt: providers
```
@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
  `,
  providers: [{provider: DemoParent, useExisting: DemoParentComponent}]
})
export class DemoParentComponent implements DemoParent {
    paramOneVal: any = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
}
```
Nach dem Login kopieren
Dann können Sie dies in der untergeordneten Komponente tun Finden Sie das Beispiel der übergeordneten Komponente über die DemoParent-ID. Ja, der Beispielcode lautet wie folgt:
```
@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    paramOne: any;
    paramTwo: any;
    
    constructor(public demoParent: DemoParent) {
        
        // 通过父组件实例demoParent获取数据
        this.paramOne = demoParent.paramOneVal;
        this.paramTwo = demoParent.paramTwoVal;
    }
}
```
Nach dem Login kopieren

子组件向父组件传递

依然先定义两个组件，分别为子组件DemoChildComponent和父组件DemoParentComponent.

子组件：

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <p>子组件DemoChildComponent</p>
  `
})
export class DemoChildComponent implements OnInit {
    readyInfo: string = &#39;子组件DemoChildComponent初始化完成！&#39;;
    @Output() ready: EventEmitter = new EventEmitter<any>(); // 输出属性
    
    ngOnInit() {
        this.ready.emit(this.readyInfo);
    }
}

Nach dem Login kopieren

父组件：

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <demo-child (ready)="onReady($event)" #demoChild></demo-child>
    <p>
        <!-- 通过本地变量获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
        readyInfo: {{demoChild.readyInfo}}
    </p>
    <p>
        <!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
        readyInfo: {{demoChildComponent.readyInfo}}
    </p>
  `
})
export class DemoParentComponent implements AfterViewInit {
    // @ViewChild(&#39;demoChild&#39;) demoChildComponent: DemoChildComponent; // 通过模板别名获取
    @ViewChild(DemoChildComponent) demoChildComponent: DemoChildComponent; // 通过组件类型获取
    
    ngAfterViewInit() {
        console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
    }

    onReady(evt: any) {
        console.log(evt); // 打印结果：子组件DemoChildComponent初始化完成！
    }
}

Nach dem Login kopieren

父组件监听子组件的事件

子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

在上面定义好的子组件和父组件，我们可以看到：

子组件通过@Output()定义输出属性ready，然后在ngOnInit中利用ready属性的 emits(向上弹射)事件。

父组件在其模板中通过选择器demo-child引用子组件DemoChildComponent，并绑定了一个事件处理器(onReady())，用来响应子组件的事件($event)并打印出数据（onReady($event)中的$event是固定写法，框架(Angular)把事件参数(用 $event 表示)传给事件处理方法）。

父组件与子组件通过本地变量（模板变量）互动

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。

在上面定义好的子组件和父组件，我们可以看到：

父组件在模板demo-child标签上定义了一个demoChild本地变量，然后在模板中获取子组件的属性：

<p>
    <!-- 获取子组件的属性readyInfo，显示：子组件DemoChildComponent初始化完成！ -->
    readyInfo: {{demoChild.readyInfo}}
</p>

Nach dem Login kopieren

父组件调用@ViewChild()

本地变量方法是个简单便利的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。

当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。

在上面定义好的子组件和父组件，我们可以看到：

父组件在组件类中通过@ViewChild()获取到子组件的实例，然后就可以在模板或者组件类中通过该实例获取子组件的属性：

<p>
    <!-- 通过组件类获取子组件示例，然后获取readyInfo属性，显示：子组件DemoChildComponent初始化完成！ -->
    readyInfo: {{demoChildComponent.readyInfo}}
</p>

Nach dem Login kopieren

ngAfterViewInit() {
    console.log(this.demoChildComponent.readyInfo); // 打印结果：子组件DemoChildComponent初始化完成！
}

Nach dem Login kopieren

通过服务传递

Angular的服务可以在模块注入或者组件注入（均通过providers注入）。

在模块中注入的服务在整个Angular应用都可以访问（除惰性加载的模块）。

在组件中注入的服务就只能该组件和其子组件进行访问，这个组件子树之外的组件将无法访问该服务或者与它们通讯。

下面的示例就以在组件中注入的服务来进行父子组件之间的数据传递：

通讯的服务：

@Injectable()
export class CallService {
    info: string = &#39;我是CallService的info&#39;;
}

Nach dem Login kopieren

父组件：

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <demo-child></demo-child>
    <button (click)="changeInfo()">父组件改变info</button>
    <p>
        <!-- 显示：我是CallService的info -->
        {{callService.info}}
    </p>
  `,
  providers: [CallService]
})
export class DemoParentComponent {
    constructor(public callService: CallService) {
      console.log(callService.info); // 打印结果：我是CallService的info
    }
    
    changeInfo() {
        this.callService.info = &#39;我是被父组件改变的CallService的info&#39;;
    }
}

Nach dem Login kopieren

子组件：

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <button (click)="changeInfo()">子组件改变info</button>
  `
})
export class DemoChildComponent {
    constructor(public callService: CallService) {
        console.log(callService.info); // 打印结果：我是CallService的info
    }
    
    changeInfo() {
        this.callService.info = &#39;我是被子组件改变的CallService的info&#39;;
    }
}

Nach dem Login kopieren

上面的代码中，我们定义了一个CallService服务，在其内定义了info属性，后面将分别在父子组件通过修改这个属性的值达到父子组件互相传递数据的目的。

然后通过DemoParentComponent的providers元数据数组提供CallService服务的实例，并通过构造函数分别注入到父子组件中。

此时，通过父组件改变info按钮或子组件改变info按钮在父组件或子组件中改变CallService服务的info属性值，然后在页面可看到改变之后对应的info属性值。