标签: angular-components

每当我创建一个新组件时,有没有办法摆脱Angularjs 2中的spec.ts文件.我知道这是出于测试目的,但如果我不需要它会怎样.

可能有一些设置来禁用此特定测试文件.

是否可以在Angular 4中声明具有泛型类型的组件？

以下代码导致生成错误:

export class MyGenericComponent<T> implements OnInit {
    @Input()  data: BehaviorSubject<T[]>;

    //...
}

执行时的错误ng serve是:

ERROR in C:/.../my-generic.module.ts (5,10): Module '"C:/.../my-generic.component"' has no exported member 'MyGenericComponent'.

例:

以下示例是尝试实现通用数据表,其中@Input() data从一个组件"调用此组件"到另一个组件的更改.现在的问题是可以BehaviorSubject<any[]>被改变到BehaviorSubject<T[]>哪里T会是泛型类型传递到组件？

@Component({
  selector: 'my-data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.css']
})
export class DataListComponent implements OnInit {
  @Input()  data: BehaviorSubject<any[]>;
  @Output() onLoaded = new EventEmitter<boolean>();

  private tableDataBase : TableDataBase = new TableDataBase();
  private dataSource : TableDataSource | null;

  constructor() { }

  ngOnInit() { …

注意:为简单起见,请将组件深度视为:

- Smart (grand)parent level 0
  - dumb child level 1
   ....
    - dumb grandchild level 2
      ....)

有关智能/大/父/子组件如何在MULTI-LEVEL(至少3级)链上下传递和传递数据的各种选项和条件.我们希望将"智能"(宏)父组件保留为可以访问我们的数据服务(或原子/不可变存储)的唯一组件,并且它将促使与'哑'(大)子项交换信息.我们看到的选项是:

1. 反模式(？):通过@ Input/@输出绑定向下和向上传递数据.这有些人称之为"无关属性"或"自定义事件冒泡问题"问题(例如:此处和此处)问题.不行.
2. 反模式:通过@ViewChildren或@ContentChilden智能组件访问哑(大)孩子.这再次硬连接了孩子,并且仍然没有为(大)孩子创建一个干净的机制来将数据UP传递给智能组件.
3. 如在angular.io食谱描述共享消息服务这里和优异的交这里.
4. ？

现在在'3'的情况下,愚蠢的(大)孩子必须注入消息服务.这让我想到了我的问题:

Q1:对于每个'哑'(大)孩子来说,注入一个消息服务似乎很奇怪.消息服务的最佳做法是为这个家庭提供专门的服务,还是重新回到上面提到的"智能"祖父母的数据服务？

Q1A:另外,如果所有组件都注入了服务,那么这比在链上下添加@ Input/@输出绑定要好得多吗？(我看到'哑'组件需要一些方法来获取信息的论点)

Q2:如果'聪明'的盛大父母正在与类似redux的商店(我们的ngrx)进行通信怎么办？与'哑'组件的通信最好通过注入/专用消息服务进行,或者最好将商店注入每个'哑'组件......或者？注意,除了数据(即向/更新商店或服务添加数据)之外,组件间通信是"动作"(例如:表单验证,禁用按钮等)的组合.

非常感谢!

在我正在研究的新项目中,我已经开始使用组件而不是指令.

但是,我遇到了一个问题,我找不到具体的标准方法来做到这一点.

从孩子到父母通知事件很容易,您可以在我的下面的plunkr上找到它,但是从父母到孩子通知事件的正确方法是什么？

Angular2似乎通过使用类似的东西解决了这个问题:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var 但是我没有tink有可能定义一个子组件的"指针",就像#timer的例子一样

为了保证可以轻松转换为Angular2,我想避免:

• 事件发射(从示波器发射和广播)
• 使用来自子节点的require(然后将一个回调添加到parent..UGLY)
• 使用单向绑定,在子项中注入范围,然后"监视"此属性..更多UGLY

示例代码:

var app = angular.module('plunker', []);

app.controller('RootController', function() {
});

app.component('parentComponent', {
  template: `
    <h3>Parent component</h3>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Child</a>
    <span data-ng-bind="$ctrl.childMessage"></span>
    <child-component on-change="$ctrl.notifiedFromChild(count)"></child-component>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.notifiedFromChild = function(count){
      ctrl.childMessage = "From child " + count;
    }
    ctrl.click = function(){
    }
  },
  bindings: {
  }
});

app.component('childComponent', {
  template: `
    <h4>Child component</h4>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Parent</a>
  `,
  controller: function() …

我在角度4世界中相当新,我试图在Angular Material设计中使用Angular 4为md-table组件添加每个行和标题列的"编辑/删除"按钮是"Action".我该怎么办？这个？每行的自定义标题列和按钮.任何可用的模板吗？下面是我的HTML代码.

userinfo.html

<!-- ID Column -->
<ng-container cdkColumnDef="username">
<md-header-cell *cdkHeaderCellDef> User Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.username}} </md-cell>
</ng-container>

<!-- Email Column -->
<ng-container cdkColumnDef="email">
<md-header-cell *cdkHeaderCellDef> Email </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.email}} </md-cell>
</ng-container>

<!-- First Name Column -->
<ng-container cdkColumnDef="userFirstName">
<md-header-cell *cdkHeaderCellDef> First Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell>
</ng-container>

<!-- Last Name Column -->
<ng-container cdkColumnDef="userLastName">
<md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell>
</ng-container> 

<!-- Phone Column -->
<ng-container cdkColumnDef="userMobile"> …

在ParentComponent =>中

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: '[object Object]'.
            at viewDebugError (vendor.bundle.js:8962)
            at expressionChangedAfterItHasBeenCheckedError (vendor.bundle.js:8940)

父组件Html

<div>
  <app-child-widget [allItems]="allItems" (notify)="eventCalled($event)"></app-child-widget>
<div>

父组件

export class ParentComponent implements OnInit {

  returnedItems: Array<any> = [];
  allItems: Array<any> = [];

  constructor(
  ) { }

  ngOnInit() {
     this.allItems = // load from server...
  }

  eventCalled(items: Array<any>): void {
    this.returnedItems = items;
  }
}

儿童组件

@Component({
  selector: 'app-child-widget',
  templateUrl: 'child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit …

我的部件通常由具有多开始了@Input和@Output性能.当我添加属性时,将单个配置对象切换为输入似乎更简洁.

例如,这是一个具有多个输入和输出的组件:

export class UsingEventEmitter implements OnInit {
    @Input() prop1: number;
    @Output() prop1Change = new EventEmitter<number>();
    @Input() prop2: number;
    @Output() prop2Change = new EventEmitter<number>();

    ngOnInit() {
        // Simulate something that changes prop1
        setTimeout(() => this.prop1Change.emit(this.prop1 + 1));
    }
}

它的用法:

export class AppComponent {
    prop1 = 1;

    onProp1Changed = () => {
        // prop1 has already been reassigned by using the [(prop1)]='prop1' syntax
    }

    prop2 = 2;

    onProp2Changed = () => {
        // prop2 has already …

延迟加载是一种常用的技术.但是,在Angular中,似乎该技术的粒度级别在模块级别停止.

这意味着您可以在浏览器中加载模块main,然后在特殊场合模块B和C和D可以懒惰加载.

几乎所有关于网络的教程都解释了这一点.但是,有没有办法懒洋洋地加载组件？

考虑这个用户进入应用程序的简单示例,当点击"发票"链接时,URL更改为新路由/invoice/list,进度条显示加载,而invoices包含HTML和JS 的组件正在浏览器中加载,则动态注册主模块,并在相关插座中显示.Angular有可能吗？

@Component({
    selector: '.donation',
    template: `
    <figure id="donation" move>
        <img src="image/qrcode.png"/>
        <figcaption>
        Buy me a cup of coffee.
        </figcaption>
    </figure>
    `
})
export class DonationComponent{}

@Directive({
    selector: '[move]'
})
export class MoveDirective{}

嘿,我想在MoveDirective和DonationComponent中获取元素的宽度/高度,我多次阅读文档但仍无法找到解决这个问题的方法.有人知道这个请帮帮我,非常感谢!

我正在使用Angular 2 CLI,并使用.创建了组件"MyComponent" ng generate component MyComponent.据我所知,我必须将组件添加到@Component装饰器的指令键值对,但此时打字稿编译失败,说:

ERROR in [default] /Users/Philip/Desktop/Angular2/src/app/app.component.ts:8:2 
Argument of type '{ selector: string; template: any; styles: any[]; directives: typeof MyComponentComponent[]; }' is not assignable to parameter of type 'Component'.
  Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

这是我的应用程序代码:

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  directives: [MyComponentComponent],
})
export class AppComponent {
  title = …