angular6 利用 ngContentOutlet 实现组件位置交换(重排)

chinafgj 发布于2019-08-23 12:39 / 370人阅读

摘要：实现组件位置交换中视图是和数据绑定的，它并不推荐我们直接操作元素，而且推荐我们通过操作数据的方式来改变组件视图。首先定义两个组件按钮我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。

ngContentOutlet指令介绍

ngContentOutlet指令与ngTemplateOutlet指令类似，都用于动态组件，不同的是，前者传入的是一个Component，后者传入的是一个TemplateRef。

首先看一下使用：

其中MyComponent是我们自定义的组件，该指令会自动创建组件工厂，并在ng-container中创建视图。

实现组件位置交换

angular中视图是和数据绑定的，它并不推荐我们直接操作HTML DOM元素，而且推荐我们通过操作数据的方式来改变组件视图。

首先定义两个组件：

button.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-button",
  template: ``,
  styleUrls: ["./button.component.css"]
})
export class ButtonComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

text.component.ts

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-text",
  template: `
  {{textName}}
  
  `,
  styleUrls: ["./text.component.css"]
})
export class TextComponent implements OnInit {
  @Input() public textName = "null";
  constructor() { }

  ngOnInit() {
  }

}

我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。

动态创建组件，并实现位置交换

我们先创建一个数组，用于存放上文创建的两个组件ButtonComponent和TextComponent，位置交换时，只需要调换组件在数组中的位置即可，代码如下：

import { TextComponent } from "./text/text.component";
import { ButtonComponent } from "./button/button.component";
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
  
    
  
  

  
`,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public componentArr = [TextComponent, ButtonComponent];
  constructor() {
  }
  public swap() {
    const temp = this.componentArr[0];
    this.componentArr[0] = this.componentArr[1];
    this.componentArr[1] = temp;
  }
}

执行命令npm start在浏览器中可以看到如下效果：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98906.html

angular6 利用 ngContentOutlet 实现组件位置交换

摘要：实现组件位置交换中视图是和数据绑定的，它并不推荐我们直接操作元素，而且推荐我们通过操作数据的方式来改变组件视图。首先定义两个组件按钮我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ngConten...

asce1885 2019-08-26 13:23 评论0 收藏0
angular6 利用 ngContentOutlet 实现组件位置交换

摘要：实现组件位置交换中视图是和数据绑定的，它并不推荐我们直接操作元素，而且推荐我们通过操作数据的方式来改变组件视图。首先定义两个组件按钮我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ngConten...

OnlyMyRailgun 2019-07-25 14:31 评论0 收藏0
angular6.x中ngTemplateOutlet指令的使用

摘要：在使用进行开发的时候通过属性绑定向组件内部传值的方式有时候并不能完全满足需求比如我们写了一个公共组件但是某个模板使用这个公共组件的时候需要在其内部添加一些标签内容这种情况下除了使用预先在组件内部定义之外就可以利用指令向组件传入内容指令类似于在使用angular进行开发的时候,通过属性绑定向组件内部传值的方式,有时候并不能完全满足需求,比如我们写了一个公共组件,但是某个模板使用这个公共...

suxier 2019-08-23 10:52 评论0 收藏0