angular ng-template 灵活运用_angular双重嵌套表单动态项-程序员宅基地

技术标签： angular2/4  angular  ng-template  

用处

可以随意调整组件显示的位置，个人觉得在嵌套组件中最方便

举例

app.component.ts

import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  template: `
    <div>
      <app-parent>
        <app-child></app-child>
      </app-parent>
    </div>
  `
})
export class AppComponent {
}

parent.component.ts

import { Component, OnInit, TemplateRef } from '@angular/core';
interface Ichild extends Component{
  content: TemplateRef<void>
}
@Component({
  selector: 'app-parent',
  styleUrls: ['./parent.component.css'],
  template: `
    <div>
      <div *ngIf="position==true">
        <ng-template [ngTemplateOutlet]="myChild.content"></ng-template>
      </div>
      <div><button (click)="change()">btn</button></div>
      <div *ngIf="position==false">
        <ng-template [ngTemplateOutlet]="myChild.content"></ng-template>
      </div>
    </div>
  `
})
export class ParentComponent {
  myChild: Ichild;
  position: boolean = true;
  addChild(child: Ichild) {
    this.myChild = child;
  }
  change() {
    this.position = !this.position;
  }
}

child.component.ts

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { ParentComponent } from '../parent/parent.component';
@Component({
  selector: 'app-child',
  styleUrls: ['./child.component.css'],
  template: `
  <ng-template>
    <div>
      child component works!
    </div>  
  </ng-template>
  `
})
export class ChildComponent implements OnInit {
  @ViewChild(TemplateRef) content: TemplateRef<void>;
  constructor(public prt: ParentComponent) { }
  ngOnInit() {
    this.prt.addChild(this);
  }

}

效果

在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30101131/article/details/85109396

智能推荐

【Javascript】输入一个数字计算一个数的阶乘_js使用函数完成任意数字阶乘的计算 要求:页面输入任意数字,点击按钮后计算阶乘-程序员宅基地

文章浏览阅读277次。传入参数为3，3*test(2) test(2)又调用了一遍函数，2*test（1） ，test(1)这时调用test()首先判断参数等于1的时候，结果返回他的自身。如果不等于1则返回n*test(n-1)_js使用函数完成任意数字阶乘的计算 要求:页面输入任意数字,点击按钮后计算阶乘

java计算机毕业设计web硕士研究生招生考试专业报考查询及学习系统设计与实现源码+mysql数据库+系统+lw文档+部署_基于javaweb的考研信息查询系统代码-程序员宅基地

文章浏览阅读86次。java计算机毕业设计web硕士研究生招生考试专业报考查询及学习系统设计与实现源码+mysql数据库+系统+lw文档+部署。源码地址：springboot基于SpringBoot的实验填报管理系统。springboot生物遗传病的治疗和防范系统。springboot多维分类的知识管理系统。ssm基于B_S景区票务管理系统设计与实现。ssm基于Java的摄影网上预约管理系统。_基于javaweb的考研信息查询系统代码

Qt键盘事件常用按键key值整理_qt键key定义-程序员宅基地

文章浏览阅读1.6k次，点赞2次，收藏23次。Qt键盘事件常用按键key值整理_qt键key定义

WEB42问-程序员宅基地

文章浏览阅读1.4k次，点赞26次，收藏30次。当利用这四个函数来包含文件时，不管文件是什么类型（图片、txt等等），都会直接作为php文件进行解析。原理：在数据交互中，前端的数据传入到后台处理时，由于后端没有做严格的判。拿支付漏洞来说，简单思路有价格修改，支付状态修改，数量最大值溢出，订单。没有回显的情况下，一般编写脚本，进行自动化注入。运行时栈，从而改变程序正常流向，轻则导致程序崩溃，重则系统特权被窃取。如果在包含的过程中有错，比如文件不存在等，则会直接退出，不执行后续语句。从规则层面：编码绕过，等价符号替换绕过，普通注释和内敛注释，缓冲区溢。

java毕业生设计校园社团管理平台演示录像2021计算机源码+系统+mysql+调试部署+lw-程序员宅基地

文章浏览阅读57次。java毕业生设计校园社团管理平台演示录像2021计算机源码+系统+mysql+调试部署+lw。ssm基于VUE.js的保护环境的App的开发与实现。jsp网上花卉销售系统的设计与实现sqlserver。jsp会议管理系统的设计与实现sqlserver。ssm基于Java的废品回收管理系统的设计与实现。jsp基于SSM的考研信息共享平台的设计与实现。ssm基于ssm+vue的高校个性化选课推荐。ssm基于JAVA的OA办公系统的设计与实现。ssm基于移动端的校园请假系统的设计与实现。

2023最新SSM计算机毕业设计选题大全（附源码+LW）之java社区闲置物品交易平台z10mc_基于ssm的社区物品交易系统-程序员宅基地

文章浏览阅读213次。如果你自己基础不好或者是小白的情况下那就建议你选择网站、系统类的去做，但是还得问问你们导师，如果你们导师没问题就可以，因为有的导师是不愿意你们选择做网站、系统的，毕竟做的人比较多，重复率调高，选择这种题目都是要创新功能，所以会比较棘手。ssm基于ssm的毕业生实习记录管理系统ba6a4。ssm基于SSM框架的临时摊位管理系统q7307。ssm基于ssm的校园疫情防控管理72j8f。ssm养老院管理系统的设计于实现78fyn。ssm基于ssm的牧场管理系统6ui1j。ssm基于SSM驾校管理系统2k97v。_基于ssm的社区物品交易系统

随便推点

jvm底层-程序员宅基地

文章浏览阅读531次，点赞5次，收藏7次。继承java.lang.ClassLoader类try {//字节数组转class对象，字节数组是class文件读取后最终的字节数组//初始化自定义类加载器 先初始化父类classloader；会把自定义类加载器的父加载器=appClassLoaderMyClassLoader classLoader = new MyClassLoader("读取哪个路径");Class clazz = classLoader.loadClass("类全路径");

在C编程中使用到的几个重要关键字之一const_在c程序中定义一个数组用哪些关键字-程序员宅基地

文章浏览阅读287次。const是一个C语言的关键字，它限定一个变量不允许被改变。使用const在一定程度上可以提高程序的安全性和可靠性，另外，在观看别人代码的时候，清晰理解const所起的作用，对理解对方的程序也有一些帮助。另外CONST在其他编程语言中也有出现，如C++、PHP5、C#.net、HC08 C。　　C中CONST的使用： 　　虽然这听起来很简单，但实际上，const的使用也是c_在c程序中定义一个数组用哪些关键字

《设计师要懂心理学》-第二章-人如何阅读-程序员宅基地

文章浏览阅读129次。第二章 人如何阅读　　如今世界成人识字率已超过80%。对很多人来说，阅读是主要的沟通手段。但我们是如何阅读的？对此，设计师应该了解什么呢？13.大写单词难读之谜　　Kenneth Paap（1984）与Keith Rayner（1998）的研究表明，阅读时我们其实是在识别和预想字母，然后根据字母认出单词。要点：1）阅读并非看上去那么流畅　阅读时，我们会觉..._人们偏好较小的行宽并且喜欢

SQL 数据查询语句_查询每个雇员的情况及其工作部门的情况-程序员宅基地

文章浏览阅读4.7k次，点赞6次，收藏63次。《数据库系统 》 实验报告实验名称 SQL 数据查询语句 实验地点 实验楼423 实验日期一、实验目的及要求掌握SELECT 语句的基本语法和查询条件表示方法掌握GROUP BY 和ORDER BY 子句的作用和使用方法掌握连接查询和子查询的使用方法二、实验环境Windows 10 SQLSERVER 2008三、实验内容实验任务一：1.对上节建立的表输入数据：Departments 表：Employee 表：Salary表信息：_查询每个雇员的情况及其工作部门的情况

BCGControlBar的使用_bcgcontrolbar 编译 static release-程序员宅基地

文章浏览阅读714次。安装 BCGControlBar 库到你的计算机：解压缩 BCGControlBar.zip （比如，到 c:/bcg 目录中）把 c:/bcg/bin 增加到你的 path 环境变量中，运行 Visual C++ 并且打开 Tools | Options 对话框，切换到Directories 页并且把 c:/bcg/bcgcontrolbar 加入到 include 目录 中，把 c_bcgcontrolbar 编译 static release

深度学习论文:Deep learning-Yann LeCun-Nature 2015_deep learning yann lecun-程序员宅基地

文章浏览阅读4.7k次，点赞10次，收藏40次。Deep learning(Yann LeCun, Yoshua Bengio & Geoffrey Hinton)doi:10.1038/nature14539Abstract:Deep learning allows computational models that are composed of multiple processing layers to learn representations of data with multiple levels of abstra._deep learning yann lecun

推荐文章

热门文章

相关标签