Pratique de développement angulaire (4) : interaction entre les composants

Dans le développement d'applications angulaires, on peut dire que les composants sont partout. Cet article présentera plusieurs scénarios de communication de composants courants, qui sont des méthodes d'interaction entre deux ou plusieurs composants.

Selon le sens de transmission des données, il est divisé en trois types : le composant parent passe au composant enfant , le composant enfant passe au composant parent et passe par le service une méthode d'interaction.

Le composant parent transmet

le composant enfant via le décorateur @Input pour définir les attributs d'entrée, puis le composant parent transmet ces attributs d'entrée à l'enfant lors du référencement le composant enfant. Le composant transmet les données et les sous-composants peuvent intercepter les modifications des valeurs des attributs d'entrée via setter ou ngOnChanges().

Définissez d'abord deux composants, à savoir 子组件DemoChildComponent et 父组件DemoParentComponent.

sous-composant :

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

Le sous-composant définit les attributs d'entrée via @Input() paramOne et paramTwo (la valeur de l'attribut peut être n'importe quel type de données)

composant parent :

@Component({
  selector: 'demo-parent',
  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;;
}

Le composant parent fait référence à demo-child via le sélecteur 子组件DemoChildComponent dans son modèle, Et transmettre les données au sous-composant via les deux attributs d'entrée paramOne et paramTwo du sous-composant Enfin, les deux lignes de texte 传递给paramOne的数据 et 传递给paramTwo的数据 sont affichées dans le modèle du sous-composant. sous-composant.

Interception des changements dans les valeurs d'attribut d'entrée via des setters

Dans les applications pratiques, nous devons souvent effectuer des opérations correspondantes lorsqu'une valeur d'attribut d'entrée change, nous devons donc à ce moment utiliser Go au setter de l'attribut d'entrée pour intercepter les modifications de la valeur de l'attribut d'entrée.

Nous allons transformer 子组件DemoChildComponent comme suit :

@Component({
  selector: 'demo-child',
  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
}

Dans le code ci-dessus, nous pouvons voir que la valeur interceptée paramOne est attribuée via le setter de l'attribut val Donnez l'attribut privé interne paramOneVal pour obtenir l'effet de transmission des données du composant parent au composant enfant. Bien sûr, le plus important est que vous puissiez effectuer davantage d'autres opérations dans le setter, ce qui rend le programme plus flexible.

Utilisez ngOnChanges() pour intercepter les modifications des valeurs d'attribut d'entrée.

通过 setter 截听输入属性值的变化 La méthode ne peut surveiller les modifications que dans une seule valeur d'attribut. Si vous devez parfois surveiller plusieurs attributs d'entrée interactifs. , cette méthode devient inefficace. En utilisant la méthode ngOnChanges() de l'interface hook de cycle de vie OnChanges (appelée lorsque la valeur des variables explicitement spécifiées par le composant via le décorateur @Input change), vous pouvez surveiller simultanément les changements dans les valeurs de plusieurs propriétés d'entrée. .

Ajouter 子组件DemoChildComponent dans ngOnChanges :

@Component({
  selector: 'demo-child',
  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}`);
            }
        }
    }
}

Les paramètres reçus par la nouvelle ngOnChanges méthode changes sont basés sur le nom de l'attribut d'entrée comme clé et valeur est SimpleChange objet, l'objet SimpleChange contient des attributs tels que si l'attribut d'entrée actuel change pour la première fois, la valeur précédente, la valeur actuelle, etc. Par conséquent, dans la méthode ngOnChanges, plusieurs valeurs d'attributs d'entrée peuvent être surveillées et les opérations correspondantes effectuées en parcourant l'objet changes.

Obtenir l'instance du composant parent

Comme mentionné ci-dessus, le composant enfant définit l'attribut d'entrée via @Input装饰器, afin que le composant parent puisse transmettre des données au composant enfant via l'attribut d'entrée.

Bien sûr, nous pouvons penser à une méthode plus proactive, qui consiste à obtenir l'instance du composant parent puis à appeler une propriété ou une méthode du composant parent pour obtenir les données requises. Considérant que chaque instance de composant est ajoutée au conteneur de l'injecteur, un exemple du composant parent peut être trouvé via l'injection de dépendances.

子组件获取父组件实例 est plus gênant que 父组件获取子组件实例 (obtenu directement via 模板变量, @ViewChild ou @ViewChildren).

Pour récupérer l'instance du composant parent dans le composant enfant, il existe deux situations :

• Le type du composant parent est connu

  Cette situation peut obtenir un type connu de référence de composant parent directement en injectant DemoParentComponent dans le constructeur. L'exemple de code est le suivant :

  @Component({
    selector: 'demo-child',
    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;
      }
  }

• Type de composant parent inconnu

  Un composant Il peut s'agir d'un sous-composant de plusieurs composants. Parfois, le type du composant parent ne peut pas être connu directement dans Angular, il peut être trouvé via la méthode

  , c'est-à-dire que le composant parent peut aider en fournissant un alias. avec le même nom que l'identifiant 类—接口（Class-Interface） Find. 类—接口

  Créez d'abord la classe abstraite DemoParent, qui déclare uniquement les attributs

  et paramOneVal sans implémentation (affectation). L'exemple de code est le suivant : paramTwoVal

  export abstract class DemoParent {
      paramOneVal: any;
      paramTwoVal: any;
  }

  puis dans.

  父组件DemoParentComponentDéfinissez un alias Provider dans les métadonnées et utilisez useExisting pour injecter une instance du composant parent DemoParentComponent. L'exemple de code est le suivant : providers

  @Component({
    selector: 'demo-parent',
    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;;
  }

  Ensuite dans le composant enfant, vous pouvez. recherchez l'exemple du composant parent via l'identifiant DemoParent Oui, l'exemple de code est le suivant :

  @Component({
    selector: 'demo-child',
    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;
      }
  }

子组件向父组件传递

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

子组件：

@Component({
  selector: 'demo-child',
  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);
    }
}

父组件：

@Component({
  selector: 'demo-parent',
  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初始化完成！
    }
}

父组件监听子组件的事件

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

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

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

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

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

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

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

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

e388a4556c0f65e1904146cc1a846bee
    2e82f1e8d02a21d96f8be243a083025d
    readyInfo: {{demoChild.readyInfo}}
94b3e26ee717c64999d7867364b1b4a3

父组件调用@ViewChild()

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

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

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

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

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

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

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

通过服务传递

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

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

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

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

通讯的服务：

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

父组件：

@Component({
  selector: 'demo-parent',
  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;;
    }
}

子组件：

@Component({
  selector: 'demo-child',
  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;;
    }
}

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

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

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

相关推荐：

Angular开发实践（三）：剖析Angular Component

Angular开发实践（二）：HRM运行机制

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!