标签: angular2-template

我正在尝试创建一个可配置的可重用表。单元格可以配置为具有 html 模板。

我正在配置“ Review ”列，使其具有带有带有点击事件的锚标记的 html 模板（review(row)）。

到目前为止，我尝试将此模板作为innerHTML 插入，但所有角度绑定都不起作用。然后我尝试创建一个动态调用的组件（review.component.ts），但该组件仅在第一行调用一次。此外，我没有找到任何方法将当前行项目传递给单击事件 review(row) （在 review.component.ts 内）。

雇员.组件.ts：

import { Component, OnInit, DynamicComponentLoader, ElementRef, Inject, Injector} from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {DataTableComponent} from '../../data_table/data_table.component';
import {DataTable} from '../../data_table/dataTable';
import {Cell} from '../../data_table/cell';
import {ReviewComponent} from './review.component';

@Component({
    selector: 'employee',
    templateUrl: './app/employee/employee.html',
    directives: [DataTableComponent, ReviewComponent, RouterLink, RouterOutlet, ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

export class EmployeeComponent implements OnInit {
    public tableConfig: DataTable;
    public …

我有一个自定义管道来过滤数组。管道用于子组件内部，数据通过输入参数传递到子组件。当输入数据改变时，管道不会被调用。在子组件中使用 ChangeDetectionStrategy.OnPush 时，我需要做些什么不同的事情吗？

编辑

在下面的示例中，product-list-container 从 ngrx 商店获取产品。数据通过输入参数传递到产品列表组件。

在产品列表组件中，我有一个过滤器，用于根据某些条件过滤掉行。我看到的问题是，当输入值更改时，不会调用管道函数。Pipe 在组件加载时仅被调用一次。

@Component({
  selector: 'product-list-container',
  template: `
    <app-product-list [productList]="productList$ | async"></app-product-list>
  `
})
export default class ProductListContainer implements OnInit {
  public productList$: Observable<Product[]>;
  constructor(public store: Store<AppState>) {
  }
  ngOnInit() {
    this.productList$ = this.store.select('productList');
  }
}

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of productList | filterActiveProduct">
   // More code here 
    </div>
  `,
  changeDetection: changeDetectionStrategy.onPush
})
export default class ProductList {
  @Input() productList: Product[];
  constructor() {
  }
}

@Pipe({
  name: 'fromNow'
}) …

我有一个基于 Bootstrap 的模式对话框组件，具有三个主要子元素：标题、摘要和页脚：

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

@Component({
  selector: 'modal',
  template: `<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><ng-content select="header"></ng-content></h4>
      </div>
      <div class="modal-body">
        <ng-content select="summary"></ng-content>
      </div>
      <div class="modal-footer">
        <ng-content select="footer"></ng-content>
      </div>
    </div>
  </div>
</div>`
})
export class ModalComponent {
}

目的是简化 Bootstrap 样板：

<modal>
  <header>Hello world!</header>
  <summary>A  message</summary>
  <footer>Dialog footer</footer>
</modal>

不幸的是，包含元素（header、Summary和footer）也包含在“嵌入”中，这违反了 Bootstrap 格式。我可以只嵌入容器节点的内容吗？

这是show-data组件:

@Component({
    selector: 'show-data',
    template: `yes! Now showing the show-data directive template !`
})
export class ShowData {}

而它的父母:

@Component({
    selector: 'my-app',
    template: `
The 'shouldShow' boolean value is: {{shouldShow}}
<show-data *ngIf="shouldShow"></show-data>
<div *ngIf="!shouldShow">NOT showing the show-data directive template</div>
`,
    directives: [ShowData]
})
export class App {
    shouldShow:boolean = false;
    constructor(){
        console.log("shouldShow value before timeout",this.shouldShow);
        window.setTimeout(function(){
            this.shouldShow = true;
            console.log("shouldShow value after timeout",this.shouldShow);
        }, 1000);
    }
}

最初,该shouldShow变量设置为false,并且show-data不显示指令模板.精细.

shouldShow 然后由父组件构造函数在一秒后设置为"true".

为什么不在shouldShow父组件视图中更新值？

这是一个傻瓜

假设我有一个接口(或实际组件)ListItemRenderer和一个MyRendererComponent实现该接口的组件(或扩展基本组件)

@Component({
    selector: 'my-renderer',
    template: '<div>My renderer</div>'
})
export class MyRendererComponent implements ListItemRenderer {
    ...
}

我想将这个具体的实现传递给另一个组件,例如

@Component({
    selector: 'my-list',
    template: `
        <ul [renderer]="renderer" [items]="items">
            <li *ngFor="let item of items">
                <!-- what goes here? -->
            </li>
        </ul>
    `
})
export class MyList {
    @Input() renderer: ListItemRenderer;
    @Input() items: any[];
    ...
}

显然,父组件将具有renderer类型的公共属性ListItemRenderer.问题是,我如何在我的网站中使用该组件<li>(参见上文中的" 内容？ ")？

正如文章中所建议的:

https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

为了在RC2中使用新表单,我们需要使用以下代码禁用已弃用的表单:

import {disableDeprecatedForms, provideForms} from '@angular/forms';
bootstrap(AppComponent, [
   disableDeprecatedForms(),
   provideForms()
])

这显然意味着我们现在还需要在package.json中包含以下内容:

"@angular/forms": "2.0.0-rc.2",

但是当我将"@ angular/forms":"2.0.0-rc.2"添加到我的package.json并尝试恢复包时,它会给出以下错误:

npm ERR! node v6.2.1
npm ERR! npm  v3.9.3
npm ERR! No compatible version found: @angular/forms@2.0.0-rc.2
npm ERR! Valid install targets:
npm ERR! 0.1.0

有人可以指导吗？

有没有办法让Angular 2组件根据我想放置的位置使用许多模板文件？

例如,我有一个login组件,我想在我的网站上放两次不同的设计.

有没有办法可以将模板传递给组件？

AsyncPipe与BehaviorSubject一起使用，但是我不想用空数据初始化我的服务，因此我使用Subject intead。

问题是NgFor和asyncPipe无法与Subject一起使用，这是一个问题吗？

这有效：

零件：

export class AppComponent {
  foo = new BehaviorSubject<Array<number>>([1,2,3]);

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.asObservable() | async">{{e}}</span>

这不起作用：

零件

export class AppComponent {
  foo = new Subject<Array<number>>();

  constructor(){
     setTimeout(() => {
          this.foo.next([1,2,3]);
     }, 3000);
  }

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.getFoo() | async">{{e}}</span>

我正在尝试在滚动时在屏幕顶部保留一个div.

我找到了几个关于它的指南和SO问题,但它对我不起作用.

我使用过这些:

• angular2滚动然后固定标头在bootstrap整页模态问题
• http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener/
• 角度2改变位置固定在滚动上
• Angular 4 @HostListener窗口滚动事件奇怪地在Firefox中不起作用

这就是我到目前为止所做的事情:

零件 :

import {DOCUMENT} from '@angular/platform-browser';
@Component({
    selector: 'example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
    public fixed: boolean = false;
    constructor( @Inject(DOCUMENT) private doc: Document) {}
    ngOnInit(): void {
        this.onWindowScroll();
    }
    @HostListener('window:scroll', [])
    onWindowScroll() {
        let number = window.pageYOffset || document.documentElement.scrollTop || window.scrollY || 0;
        if (number > 100) {
            this.fixed = true;
        } else if (this.fixed && number < 10) {
            this.fixed = false; …

如何从打字稿中的数组中删除对象？

"revenues":[
{
        "drug_id":"20",
        "quantity":10
},
{
        "drug_id":"30",
        "quantity":1    
}]

所以我想从所有对象中删除drug_id.我怎么做到这一点？谢谢!