标签: angular-components

我有一些元素,我想在某些条件下可见.

在AngularJS中我会写

<div ng-show="myVar">stuff</div>

我怎么能在Angular中做到这一点？

有人知道如何获取组件模板中定义的元素吗？聚合物使得它真正用简单的$和$$.

我只是想知道如何在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;
    }
}

如何从类定义中捕获por input元素的引用？

我有一个父组件:

<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但这也无济于事.

那么如何设置包含在父组件中的子组件的样式？

我在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%;
}

这两种方法似乎都不起作用.

谢谢.

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

我正在尝试在其他模块中使用我在AppModule中创建的组件.我收到以下错误:

"未捕获(承诺):错误:模板解析错误:

'contacts-box'不是已知元素:

1. 如果'contacts-box'是Angular组件,则验证它是否是此模块的一部分.
2. 如果'contacts-box'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.

我的项目结构很简单:

我将页面保存在页面目录中,每个页面保存在不同的模块中(例如客户模块),每个模块都有多个组件(如customers-list-component,customers-add-component等).我想在这些组件中使用我的ContactBoxComponent(例如,在customers-add-component内部).

如您所见,我在widgets目录中创建了contacts-box组件,因此它基本上位于AppModule中.我将ContactBoxComponent导入添加到app.module.ts并将其放入AppModule的声明列表中.它没有用,所以我搜索了我的问题,并将ContactBoxComponent添加到导出列表中.没有帮助.我也尝试将ContactBoxComponent放在CustomersAddComponent中,然后放在另一个(来自不同的模块)中,但我得到一个错误,说有多个声明.

我错过了什么？

我创建了一个子组件,它有一个我想要调用的方法.

当我调用这个方法时它只会触发该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
        notify.callMethod();
    }
}

儿童

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'notify',
    template: '<h3>Notify {{test}}</h3>'
})
export class NotifyComponent implements OnInit {
   test:string; 
   constructor() …

我的页面结构是:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

如何在app-header不刷新整个页面的情况下更新/刷新组件？

我想在用户成功登录后隐藏标题中的"登录"链接.标题在所有组件/路由中都很常见.

我正在尝试使用角度6中的多个ng内容构建自定义组件,但这不起作用,我不知道为什么.

这是我的组件代码:

<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内部呈现两个不同的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>

但该组件呈现为空白.你们知道我可能做错了什么,或者在同一个组件中渲染两个不同部分的最佳方法是什么？

谢谢!

我有一个父组件,它通过服务从服务器获取数据.我需要将一些数据传递给Child组件.

我一直试图通过常规传递这些数据,@Input()但正如我所期望的那样,我在Child组件中得到的数据是undefined.

例

父组件

@Component({
    selector: 'test-parent',
    template: `
        <test-child [childData]="data"></test-child>
    `
})

export class ParentComponent implements OnInit {
    data: any;

    ngOnInit() {
        this.getData();
    }

    getData() {
        // calling service and getting data
        this.testService.getData()
            .subscribe(res => {
                this.data = res;
            });
    }
}

子组件

@Component({
    selector: 'test-child',
    template: `
        <!-- Content for child.... -->
    `
})

export class ChildComponent implements OnInit {
    @Input() childData: any;

    ngOnInit() {
        console.log(childData); // logs undefined
    }
}

我保持简单的例子,以显示我正在尝试做的事情.我的问题是,在初始化之后是否可以将数据传递给孩子.我不确定,但在这种情况下,双向数据绑定会有帮助吗？

更多调查

根据发布的答案,我尝试使用 …