Questions tagged «angular-components»

在某些条件下，我希望看到一些元素。 在AngularJS中，我会写 <div ng-show="myVar">stuff</div> 如何在Angular 2+中做到这一点？

569 angular  angular-components  angular-template 

有人知道如何掌握组件模板中定义的元素吗？使用$和可以使Polymer变得非常容易$$。 我只是想知道如何在Angular中进行操作。 从教程中获取示例： import {Component} from '@angular/core'; @Component({ selector:'display', template:` <input #myname (input)="updateName(myname.value)"/> <p>My name : {{myName}}</p> ` }) export class DisplayComponent { myName: string = "Aman"; updateName(input: String) { this.myName = input; } } 如何在类定义中捕获或获取p或input元素的引用？

516 angular  typescript  angular-components 

我有一个父组件： <parent></parent> 我想用子组件填充该组： <parent> <child></child> <child></child> <child></child> </parent> 父模板： <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> 子模板： <div class="child">Test</div> 由于parent和child是两个独立的组件，因此它们的样式被锁定在自己的范围内。 在我的父组件中，我尝试执行以下操作： .parent .child { // Styles for child } 但是.child样式没有被应用到child组件。 我尝试使用styleUrls将parent的样式表包含到child组件中来解决范围问题： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] 但这无济于事，还尝试了另一种方法，即将child样式表提取进来，parent但这也无济于事。 那么，如何设置父组件中包含的子组件的样式？

264 css  angular  angular-components 

我在Angular 2中有一个名为my-comp的组件： <my-comp></my-comp> 如何在Angular 2中设置此组件的宿主元素的样式？ 在Polymer中，您将使用“：host”选择器。我在Angular 2中尝试过。但是它不起作用。 :host { display: block; width: 100%; height: 100%; } 我也尝试使用组件作为选择器： my-comp { display: block; width: 100%; height: 100%; } 两种方法似乎都不起作用。 谢谢。

189 css  angular  css-selectors  angular-components 

除了手动编辑所有组件文件（例如文件夹名称，.css，.ts，spec.ts和app.module.ts）之外，是否有使用Angular CLI重命名组件的快捷方式？

178 angular  angular-cli  rename  angular-components 

我正在尝试在其他模块中使用在AppModule内部创建的组件。我收到以下错误： “未捕获（承诺）：错误：模板解析错误： “联系人框”不是已知元素： 如果“ contacts-box”是Angular组件，则请验证它是否属于此模块。 如果“ contacts-box”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 我的项目结构非常简单： 我将页面保存在pages目录中，其中每个页面都保存在不同的模块（例如，customers-module）中，并且每个模块具有多个组件（例如，customers-list-component，customers-add-component等）。我想在这些组件中使用我的ContactBoxComponent（例如，在customers-add-component中）。 如您所见，我在widgets目录中创建了contacts-box组件，因此它基本上位于AppModule中。我将ContactBoxComponent导入添加到app.module.ts中，并将其放在AppModule的声明列表中。它没有用，所以我用谷歌搜索了问题，并添加了ContactBoxComponent来导出列表。没帮助 我还尝试将ContactBoxComponent放入CustomersAddComponent，然后放入另一个（来自不同模块），但出现错误，提示存在多个声明。 我想念什么？

134 angular  typescript  angular-components  angular-module 

我正在开发依赖的Ionic应用程序（2.0.0-rc0）angular 2。因此，ngModules包含了新的介绍。我在app.module.ts.下面添加我的。 import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { Users } from '../pages/users/users'; @NgModule({ declarations: [ MyApp, Users ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Users ] }) export class AppModule {} entryComponents在这里做什么？Components已在中定义declarations。那么有什么需要重复的？如果我在此处不包含组件会怎样？

131 angular  angular-components  angular-module 

我创建了一个子组件，该子组件具有要调用的方法。 当我调用此方法时，它仅触发该console.log()行，而不会设置该test属性？ 下面是我的更改的快速入门Angular应用。 父母 import { Component } from '@angular/core'; import { NotifyComponent } from './notify.component'; @Component({ selector: 'my-app', template: ` <button (click)="submit()">Call Child Component Method</button> ` }) export class AppComponent { private notify: NotifyComponent; constructor() { this.notify = new NotifyComponent(); } submit(): void { // execute child component method …

130 angular  typescript  angular-components 

我正在尝试使用ng-contentAngular 6中的多个组件来构建自定义组件，但这不起作用，我也不知道为什么。 这是我的组件代码： <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> 我试图在另一个地方使用此组件，并在body和的标头select中呈现两个不同的HTML代码ng-content，如下所示： <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> 但是组件使空白。 你们知道我可能做错了什么，还是在同一组件中呈现两个不同部分的最佳方法是什么？ 谢谢！

103 angular  angular6  angular-components  ng-content