搜尋
首頁web前端js教程angular6如何使用ngContentOutlet實作元件位置交換(程式碼範例)

本篇文章帶給大家的內容是關於angular6如何使用ngContentOutlet實現元件位置交換(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

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: `<button>按钮</button>`,
 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: `
 <label>{{textName}}</label>
 <input>
 `,
 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: `
 <ng-container>
  <ng-container></ng-container>
 </ng-container>
 <br>
 <button>swap</button>
`,
 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;
 }
}

以上是angular6如何使用ngContentOutlet實作元件位置交換(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
GitHub项目分享:10款点开就能玩的开源在线游戏GitHub项目分享:10款点开就能玩的开源在线游戏Mar 24, 2023 pm 07:15 PM

本篇文章在GitHub上给大家整理总结10 款开源的在线游戏,点开就能玩的那种,大部分游戏支持手机端玩耍,简直不要太爽!

github是什么github是什么Mar 24, 2023 pm 05:46 PM

​GitHub是一个面向开源及私有软件项目的托管平台,可以让开发者们在这里托管自己的代码,并进行版本控制。GitHub主打的是开源项目与协作,通过这个平台上的开源项目,开发者们可以查看其他开发者的项目源代码,并进行交流和学习。

【总结】一些可能导致GitHub不能打开的原因和解决方法【总结】一些可能导致GitHub不能打开的原因和解决方法Mar 27, 2023 am 11:33 AM

GitHub是一个非常受欢迎的版本控制和代码托管平台。然而,有时候我们可能会遭遇到无法访问GitHub的问题。这是因为GitHub是一个全球性的平台,受到地理位置、网络状况、网站设置等因素的影响。本文将介绍一些可能导致GitHub不能打开的原因,以及解决这些问题的方法。

聊聊github中怎么上传项目和文本文档聊聊github中怎么上传项目和文本文档Mar 27, 2023 am 10:53 AM

GitHub是一个基于Git的代码托管平台,被广泛用于开源社区和企业内部代码管理。在GitHub上可以上传项目和文本文档,但是它所支持的格式和上传方式略有不同。

【整理分享】7个有趣又实用的开源GitHub项目【整理分享】7个有趣又实用的开源GitHub项目Nov 30, 2022 pm 06:18 PM

本篇文章给大家整理分享7个有趣又实用的开源项目,这些项目都已经收录到GitHub上的,希望对大家有所帮助!

github中怎么只下载一个文件夹中的内容github中怎么只下载一个文件夹中的内容Mar 27, 2023 am 10:53 AM

GitHub是一个流行的代码托管平台,用于开发人员协作和版本控制。作为开发人员,您可能需要从其他开发人员的GitHub存储库中只下载特定文件夹的内容。在本文中,我们将演示如何在不下载整个存储库的情况下只下载GitHub存储库中的一个文件夹。

详解将Github项目部署到服务器上的步骤详解将Github项目部署到服务器上的步骤Mar 27, 2023 am 10:53 AM

Github是目前全球最大的开源社区,很多程序员都会将自己的代码托管在Github上,借助其方便的版本控制和协作功能。然而,Github上的项目仅仅是代码,要把它部署到服务器上运行,需要一些额外的工作。本文将为大家介绍具体的操作步骤。

聊聊如何删除GitHub库中的一个文件夹聊聊如何删除GitHub库中的一个文件夹Mar 27, 2023 am 11:33 AM

GitHub是一个非常受欢迎的版本控制系统,它允许用户在互联网上存储和共享自己的代码库。它是程序员的必备工具之一。但是,有时候我们可能需要删除GitHub库中的一个文件夹。本篇文章将介绍如何删除GitHub库中的一个文件夹。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具