首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular 8中,在指令的'host‘属性中动态设置的类不会应用于父模板

在Angular 8中,指令的'host'属性用于定义指令所应用的宿主元素,并可以在宿主元素上动态设置类。然而,动态设置的类不会自动应用于父模板。

在Angular中,指令的'host'属性是一个对象,用于指定宿主元素的属性、事件和样式。可以使用动态绑定语法来设置类,例如:

代码语言:txt
复制
@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @HostBinding('class.myClass') myClass = true;
}

在上面的例子中,'myDirective'指令会将类名为'myClass'的类动态应用于宿主元素。然而,这个类不会自动应用于父模板。

要在父模板中应用动态设置的类,可以使用Angular的属性绑定机制。首先,在指令中定义一个属性,用于接收父组件传递的类名:

代码语言:txt
复制
@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() myClass: string;
}

然后,在父组件的模板中,使用属性绑定将类名传递给指令:

代码语言:txt
复制
<div myDirective [myClass]="'myClass'"></div>

最后,在指令中使用动态绑定语法将接收到的类名应用于宿主元素:

代码语言:txt
复制
@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  @Input() myClass: string;

  @HostBinding('class') get hostClasses() {
    return this.myClass;
  }
}

通过上述步骤,动态设置的类将应用于父模板中的宿主元素。

关于Angular 8的更多信息和相关产品,您可以参考腾讯云的官方文档和产品介绍页面:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

__init__设置对象

1、问题背景Python,可以为对象设置一个,从而实现继承。但是,如果想要在实例化对象时动态地指定,则会出现问题。...(parent=Blue)blue_square = Square(parent=Blue)但是,这段代码会报错,因为Python,对象只能在定义时指定,不能在实例化对象时动态设置。...第一个解决方案是使用工厂。工厂是一个函数,它可以动态地创建工厂,可以根据传入参数来决定创建哪个。...如果parent是Blue,则创建两个,Circle和Square,它们都是Blue。最后,它返回创建。这样,我们就可以实例化对象时动态地指定对象了。第二个解决方案是使用依赖注入。...依赖注入是一种设计模式,它可以将对象依赖关系从对象本身解耦出来。这样,就可以实例化对象时动态地注入它依赖关系。

7810

AngularDart4.0 指南- 模板语法二 顶

如果名称未能匹配已知指令元素事件或输出属性,则Angular会报告“未知指令”错误。 $event和事件处理语句 事件绑定Angular为目标事件设置了一个事件处理程序。...它们通常应用于元素,就好像它们是HTML属性一样,因此也就是名称。 属性指令指南中介绍了许多细节。 许多Angular包(如Router和Forms包)都定义了自己属性指令。...NgStyle 您可以根据组件状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值简单方法。...Angular把这条指令翻译成一个围绕宿主元素,然后重复使用这个模板为列表每个英雄创建一组新元素和绑定。 “结构指令”指南中了解微语法。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表的当前项目。

29.9K20

AngularDart4.0 高级-属性(Attribute)指令

“结构指令”页面中了解它们。 属性指令被用作元素属性。 例如,“模板语法”页面内置NgStyle指令可以同时更改多个元素样式。 属性指令有两种: 基于:一个全功能属性指令,使用实现。...属性CSS选择器是方括号属性名称。这里指令选择器是[myHighlight]。 Angular定位模板具有名为myHighlight属性所有元素。...应用属性指令 要使用新HighlightDirective,请创建一个将该指令作为属性应用于段落()元素模板。 对Angular来说,元素是属性宿主。... 现在在AppComponent引用此模板,并将Highlight指令添加到指令列表。 当Angular模板遇到myHighlight时,就会识别该指令。...概要 该页面介绍了如何: 创建一个修改元素行为基于属性指令。 将属性指令应用于模板元素。 响应改变基于指令行为事件。 将值绑定到基于指令。 编写一个函数化属性指令

3.2K10

angular面试题及答案_angular面试

ngOninit:初始化指令或组件,angular第一次显示展示组件绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...指令分类 组件:用于构建UI组件,继承于Directive 属性指令:用于改变组件外观或行为 ngClass ngStyle 结构指令:用于动态添加或删除DOM元素来改变DOM布局 ngIf ngFor...ngOnInit : angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以从angular生命周期看,constructor是执行在先 所以既然ngOnchanges...最小化组件代码 不易于单元测试 Reactive Forms (响应式表单) 特点 比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件...ViewChild 用来从模板视图中获取匹配元素 组件 ngAfterContentInit 生命周期钩子才能成功获取通过 ContentChild 查询元素 组件

10.9K120

AngularDart4.0 高级-组件样式 顶

一种方法是组件元数据设置styles属性。 styles属性采用包含CSS代码字符串列表。...您可以每个组件上下文中使用最有意义CSS名称和选择器。 名和选择器是组件本地不会与应用程序其他地方使用和选择器相冲突。 应用程序其他位置样式更改不会影响组件样式。...:host 使用:host选择器来定位承载组件元素样式(而不是定位组件模板元素)。...您不能使用其他选择器从组件内部到达宿主元素,因为它不是组件自己模板一部分。宿主元素位于组件模板。...例如,一个CSS主题可以应用于文档元素,并且你想改变你组件看起来如何基于这个。 使用:host-context()伪选择器,它作用就像:host()函数形式一样。

2.2K20

angular基础面试题_java web面试题

@NgModule({ imports: [ BrowserModule ],导入表) —— 那些导出了本模块组件模板所需其它模块 providers: [ Logger...}) Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性指令 — 改变元素、组件或其它指令外观和行为指令...angular 生命周期顺序 ngOnChanges: Angular 设置或重新设置数据绑定输入属性时响应。... ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用 ngOnInit: Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。...,ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令内容之后调用,ngAfter...之后调用 ngAfterViewInit:当

13K50

Angular学习笔记(一)

其中最重要属性是: declarations - 声明本模块拥有的视图Angular 有三种视图:组件、指令和管道。...只有根模块才能设置 bootstrap 属性。 组件 组件负责控制视图,通过一些由属性和方法组成 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。...@Component 配置项包括: selector - CSS 选择器,它告诉 Angular 级 HTML 查找标签,创建并插入该组件。...指令 Angular 模板动态。当 Angular 渲染它们时,它会根据指令提供操作对 DOM 进行转换。 服务 服务是一个广义范畴,包括:值、函数,或应用所需特性。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。

3.3K20

Angular 从入坑到挖坑 - 组件食用指南

4.1.2、模板绑定语法 angular 应用,组件扮演着控制器或是视图模型作用,创建组件时会关联一个 html 文件,这个 html 文件则是一个基础 angular 模板文件 在这个模板文件...模板表达式变量来源 模板本身变量 指令上下文变量 组件成员信息(属性 or 方法) 使用模板表达式时,如果变量名多个来源中都存在的话,则模板变量是最优先,其次是指令上下文变量,最后是组件成员...dom 元素外观或行为 NgClass:用来设置元素多个 css 类属性,如果只设置一个 css ,应该使用模板绑定语法 class 绑定 <p [ngClass]="inlineStyle...NgSwitch 本身是一个<em>属性</em>型<em>指令</em>,它<em>不会</em>直接操作 dom 元素,而是通过它所控制<em>的</em>两个结构型<em>指令</em>(NgSwitchCase、ngSwitchDefault)来操作 dom 元素 4.3、管道 <em>在</em>使用<em>模板</em>表达式绑定数据时...@Input 用来获取数据,@Output 用来向外发送数据 4.4.2、子组件获取<em>父</em>组件信息 <em>在</em><em>父</em>组件<em>中</em>,添加对于子组件<em>的</em>引用,并将需要传递<em>的</em>数据 or 方法绑定到子组件上 传递数据直接将<em>父</em>组件<em>中</em><em>的</em><em>属性</em>值赋值给绑定在子组件上<em>的</em><em>属性</em>就可以了

15.8K30

AngularDart4.0 指南-体系结构概述 顶

您可以通过使用Angular标记组合HTML 模板,编写组件来管理这些模板服务添加应用程序逻辑以及模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。..."> 双向绑定,与属性绑定一样,数据属性值将从组件输入到输入框。...数据绑定在模板及其组件之间通信中起着重要作用。 数据绑定对于组件和子组件之间通信也很重要。 指令 ? Angular模板动态。...属性指令会改变现有元素外观或行为。 模板,它们看起来像常规HTML属性,因此也就是名称。 实现双向数据绑定ngModel指令是一个属性指令例子。...Router:客户端应用程序从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您应用编写组件测试和端到端测试。

7.9K30

AngularDart 4.0 高级-结构指令

该指南在谈论其属性以及指令功能时引用了指令。 指南描述如何将指令应用于HTML模板元素时引用了属性(attribute)名称。...它可以整个模板任何地方访问。 模板输入和引用变量名称都有其自己名称空间。 let herohero变量永远不会和#herohero一样。...虽然很少有理由模板属性或元素形式应用结构指令,但了解Angular创建并了解它工作原理仍然很重要。 当你编写自己结构指令时,你会参考。...满足Angular模板类似需求。 编写一个结构指令 本节,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf条件为true时显示模板内容。...在这个例子,前缀是my。 指令名称以Directive结尾。 Angular自己指令不会

16K20

Angular快速学习笔记(3) -- 组件与模板

显示数据 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定到 Angular 组件属性。...angular提供两种地方存放组件模板 你可以使用 template 属性把它定义为内联, 或者把模板定义一个独立 HTML 文件, 再通过 @Component 装饰器 templateUrl...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。... Angular 销毁指令/组件之前调用 OnInit钩子 使用 ngOnInit() 有两个原因: 构造函数之后马上执行复杂初始化逻辑 Angular 设置完输入属性之后,对该组件进行准备.../app.component.scss'] }) 6.属性指令 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令

15.2K30

AngularDart 4.0 高级-生命周期钩子 顶

ngOnInit Angular首次显示数据绑定属性设置指令/组件输入属性后,初始化指令/组件。 第一次ngOnChanges之后调用一次。...此示例将SpyDirective应用于SpyComponent管理ngFor英雄迭代器。...OnInit 使用ngOnInit有两个主要原因: 施工后不久执行复杂初始化 Angular设置输入属性设置组件 有经验开发人员同意组件应该便于构建且安全。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性构建之后才会设置。...这一次,它不是模板包含子视图,而是从AfterContentComponent项导入内容。 这是父母模板

6.1K10

angularjs 指令详解

用于指定该指令DOM以何种形式被声明。默认值是A,即以属性形式来进行声明。...无论哪种方式,模板URL都将通过ng内置安全层,特别是$getTrustedResourceUrl,这样可以保护模板不会被不信任源加载。...当设置为字符串时,会以字符串值为名字,来查找注册应用控制器构造函数. angular.module('myApp', []) .directive('myDirective', function...1.当我们将scope设置为false时候,我们创建指令作用域(其实是同一个作用域)共享同一个model模型,所以指令修改模型数据,它会反映到作用域模型。 true:继承并隔离 ?...2.当我们将scope设置为true时候,我们就新创建了一个作用域,只不过这个作用域是继承了我们作用域; 我觉得可以这样理解,我们新创建作用域是一个新作用域,只不过初始化时候,用了作用域属性和方法去填充我们这个新作用域

2.2K40

达观数据对AngularJS技术思考与实践

AngularJS,控制器Controller是一个Javascript函数(类型/), 能通过表达式或者ng事件指令调用。(比如,ngClick),从而达到处理数据目地。 ?...AngularJS将会遍历DOM模板, 来生成相应NG指令,所有的指令都负责针对view(即HTMLng-model)来设置数据绑定。 HTML: ? JS: ?...Directive几个属性: Restrict:E(元素),A(属性),C(),M(注释) 默认值是A Scope:默认值false,表示继承作用域,true表示继承作用域并创建自己作用域,{...1)作用域原型继承:原型继承时对变量赋值不会修改原型值,而是直接在当前scope创建一个同名属性;但如果是变量是对象,则不会创建。即基本类型会重新创建变量,引用则不会。 ?...因此当你需要重用来自控制器功能时,你所要做就是作用域中添加相应方法。这样一来,自控制器将会通过它作用域原型来获取作用域中所有方法。 ?

5.4K150

AngularDart4.0 指南- 模板语法一 顶

一些合法HTML模板没有多大意义。 ,和元素没有用处。 剩下一切都是一致。 您可以使用组件和指令出现新元素和属性来扩展模板HTML词汇表。...在下面的章节,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。 从数据绑定插值第一种形式开始,看看有多少更丰富模板HTML可以使用。请回到顶部。 插值({{...}})...{{1 + 1}}内插大括号包围模板表达式1 + 1.在下面的属性绑定部分[property] =“expression”模板表达式显示符号右侧引号。...一个没有属性世界 Angular世界属性(attributes)唯一作用是初始化元素和指令状态。...一次性字符串初始化标准HTML是常规,并且它对于指令和组件属性也同样适用。 以下示例将HeroDetailComponentprefix属性初始化为固定字符串,而不是模板表达式。

5.1K10

23 个初级 Vue.js 面试题

如何动态元素上切换 CSS ? Vue 允许我们绑定到 class 属性。在下面的例子,我们将 class 属性绑定到一个对象,该对象允许使用 data 属性切换。...} }); 在上面的代码,只要数据属性 showDiv 为 true,名 divStyle 将应用于 div。...绑定 HTML 时,该如何连接?假设存在一个元素:Process。我们只希望使用名为 “isActive” 数据属性动态地切换 btnActive 。 这可以绑定时用 Array 来实现。...什么是计算属性? 计算属性是一特殊函数结果,当从属属性发生变化时,这些函数会自动进行计算。用它们代替内联表达式可以更好地表达复杂逻辑,模板不能作为内联表达式合并。...当用户键入内容时,将重新执行计算方法,并且验证格式之后,动态删除无效。 18. 如何确保单文件组件定义 CSS 样式仅应用于该组件,而不被用于其他组件?

4.7K10

Angular 2 架构(上)

(Templates)是由 Angular 扩展 HTML 语法组成,组件 (Components)用来管理这些模板,应用逻辑部分通过服务 (Services)来完成,然后模块打包服务与组件,...几个重要属性如下: declarations (声明) - 视图类属于这个模块。 Angular 有三种类型视图: 组件 、 指令 和 管道 。...本模块把它们加入全局服务表,让它们应用任何部分都可被访问到。 bootstrap - 应用主视图,称为根组件,它是所有其它应用视图宿主。只有根模块需要设置 bootstrap 属性。...创建 Angular 组件方法有三步: 从 @angular/core 引入 Component 修饰器 建立一个普通,并用 @Component 修饰它 @Component 设置 selector...@Component 配置项说明: selector - 一个 css 选择器,它告诉 Angular 级 HTML 寻找一个 标签,然后创建该组件,并插入此标签

1.4K10
领券