
前端技术
文章平均质量分 65
^_^ 努力生活
努力生活,做好自己
展开
-
Angular之动态加载组件
Angular组件的模板不会永远是固定的,在实际应用程序中,可能需要在运行期间动态加载组件。参照Angular官方示例,练习一下Angular的动态加载组件。1.确定组件加载位置自定义一个指令,用于确定组件显示的锚点位置。import { Directive, ViewContainerRef } from '@angular/core';@Directive({ selector: '[adHost]'})export class AdDirective { constructo原创 2021-11-19 01:13:00 · 2705 阅读 · 0 评论 -
Angular的内容投影的分类和使用 ng-content ng-container ng-template ngProjectAs
一.什么是内容投影官方解释:内容投影是一种模式,你可以在其中插入或投影要在另一个组件中使用的内容。例如,你可能有一个 Card 组件,它可以接受另一个组件提供的内容。即:内容投影是组件间嵌套原生HTML标签的一种方式。父组件中嵌套子组件(HTML),自不必多说,原本就是支持的;而子组件中嵌套父组件的HTML,是内容投影的主要应用场景。二.内容投影分类和使用1.单插槽内容投影2.多插槽内容投影ng-content ng-container ng-template ngProjectAs原创 2021-11-16 23:13:55 · 452 阅读 · 0 评论 -
Angular的视图封装
文章目录一、ShadowDom 模式二、Emulated 模式三、None 模式通过在组件的元数据上设置视图封装模式,可以分别控制每个组件的封装模式。 可选的封装模式一共有如下几种:一、ShadowDom 模式ShadowDom 模式,组件的样式被包含在这个 Shadow DOM 中,外部样式进不来,组件样式出不去。二、Emulated 模式Emulated 模式,样式局限在组件视图,样式只进不出,全局样式能进来,组件样式出不去。三、None 模式None 模式,不使用视图封装,Ang原创 2021-11-05 23:55:25 · 304 阅读 · 0 评论 -
Angular父组件与子组件交互/组件间交互/组件间数据和事件交互示例
文章目录一、数据通信1.父组件向子组件传递a.通过输入型属性绑定把数据从父组件传到子组件b.通过 setter 截听输入属性值的变化一、数据通信1.父组件向子组件传递a.通过输入型属性绑定把数据从父组件传到子组件在子组件中定义变量:@Input() childVariable = "";在子组件模板中输出该变量:<p>{{childVariable}}</p>在父组件中定义变量:parentVariable = ""在父组件模板中输入该变量值:<原创 2021-11-05 23:45:40 · 3035 阅读 · 0 评论