精简版

此Plunker定义了一个<view>可以渲染任意模型+模板的组件.需要更改此项以替换先前呈现的内容,而不是添加新的对等项.

编辑:由于user3636086的响应,现在正在运行.

仍然存在一个问题:与Angular 1不同,Angular 2强迫我创建一个嵌套组件来更新模板(因为模板实际上是组件类的静态属性),所以我添加了一堆不必要的DOM节点.

长版

角度1

在我们的项目中,我们更喜欢我们的大部分代码都没有直接依赖于UI框架.我们有一个viewmodel类,它将模型和视图连接在一起.以下是简化示例:

interface IView {
    template: string;
}

class SalesView implements IView  {
    sales: number = 100;
    get template() { return "<p>Current sales: {{model.sales}} widgets.<p>"; }
}

class CalendarView implements IView {
    eventName: string = "Christmas Party";
    get template() { return "<p>Next event: {{model.eventName}}.<p>"; }
}

class CompositeView implements IView  {
    calendarView = new CalendarView();
    salesView = new SalesView();
    get template() { return …

我正在尝试基于click事件将类应用于HTML元素.从父组件的模板设置子组件的选择器的类属性时,这可以正常工作,如下面的父组件片段所示:

[class.bordered]='isSelected(item)'

这将适当地设置单击该项目时的样式.但是,我想基于相同类型的click事件在子组件中设置内部HTML元素的类,这里是子组件样式的所需目标:

template: `
  <div class="This is where I really want to apply the style">  
    {{ item.val }}
  </div>
`

有没有办法做到这一点,很容易支持？或者这被认为是一种不好的做法,我应该设计我的组件以避免这种条件样式的情况？

完整代码:

@Component({
  selector: 'parent-component',
  directives: [ChildComponent],
  template: `
    <child-component
      *ngFor='#item of items'
      [item]='item'
      (click)='clicked(item)'
      [class.bordered]='isSelected(item)'>
    </child-component>
  `
})
export class ParentComponent {
  items: Item[];
  currentItem: item;

  constructor(private i: ItemService) {
    this.items = i.items;
  }

  clicked(item: Item): void {
    this.currentItem = item;
  }

  isSelected(item: Items): boolean {
    if (!item || !this.currentItem) {
      return false;
    }
    return item.val === this.currentItem.val; …

我需要将现有的Angular 2 RC 1应用程序迁移到Angular 2 RC 4.作为其中的一部分,我还需要将现有的表单移动到Angular 2 RC 4 New Forms.

任何人都可以指导,如何将现有表格更新为新表格.

我使用的是*ngFor填充options的<select></select>.我的问题是我可以拥有10006个中的1个的数组值<select>.表现很痛苦.我知道这是因为changeDetection或One-way Binding.有没有更好地实施的方式*ngFor进行<option>.我实际上并不需要change detection或one-way binding.

我的守则

<select [formControl]="requestForm.controls['SellCommodityId']">
   <option [value]="" disabled selected>COMMODITY/GRADE</option>
   <option [value]="item.Id" *ngFor="let item of fieldOptions?.Product;">{{item.Value}}</option>                
</select>

更新12-20-2016

我将select放入其中的一个Component,如下所示:

import { Component, ChangeDetectionStrategy,Input } from '@angular/core';
/**
 * <ihda-select [list]="list" [control]="control" [titleOption]="title"></ihda-select>
 */
@Component({
  selector:'ihda-select',
  changeDetection:ChangeDetectionStrategy.OnPush,
  template:`
    <select [formControl]="control" class="form-control">
       <option [value]="" disabled selected>{{titleOption}}</option>
       <option [value]="item.Id" *ngFor="let item of list">{{item.Value}}</option>                
     </select>
  `,
  styleUrls: ['../app.component.css']
})
export class …

我开发了一个自定义指令,用于修剪输入控件的值.请找到相同的代码:

import { Directive, HostListener, Provider } from '@angular/core';
import { NgModel } from '@angular/forms';

@Directive({
 selector: '[ngModel][trim]',
 providers: [NgModel],
 host: {
  '(ngModelChange)': 'onInputChange($event)',
  '(blur)': 'onBlur($event)'
}
})

export class TrimValueAccessor {
 onChange = (_) => { };
 private el: any;
 private newValue: any;

constructor(private model: NgModel) {
  this.el = model;
}

onInputChange(event) {
  this.newValue = event;
  console.log(this.newValue);
}

 onBlur(event) {
   this.model.valueAccessor.writeValue(this.newValue.trim());    
 }
}

问题是ngModel没有更新onBlur事件的值.我试图修改onModelChange事件的值,但它不允许两个单词之间的空格(例如,ABC XYZ)

任何建议都会有所帮助.

长期的用户，第一次提问的人！我一直试图在两天的大部分时间内弄清这一点，但无济于事，所以我们开始吧。

从Angular2的外部源动态编译的模板？

我正在使用http从WordPress API获取HTML形式的页面内容。所以我有一个像这样的模板：

    <div [innerHTML] =“ contentHTML”> </ div>

而“ contentHTML”是组件中的字符串变量，并通过API调用异步分配了一个值，如下所示：

    <a routerLink="/help/faq.html"> </a>

我希望该routerLink能够正常工作。当然，routerLink可以是模板中有效的任何东西。

如果上述不可能

如果上述方法不起作用，那么如何解释传入的HTML并动态添加routerLink来替换标准href呢？

有没有办法动态设置* ngTemplateOutlet指令的值？

遵循这些原则：

<div *ngFor="let item of [ 'div', 'span' ]">
  <ng-container *ngTemplateOutlet="{{ item }}"></ng-container>
</div>

<ng-template #div>
  <div>some text inside a div</div>
</ng-template>

<ng-template #span>
  <span>some text inside a span</span>
</ng-template>

当然，它不起作用，但我想它很好地解释了我要实现的目标：如果该项是“ div”，则它应该显示#div模板，如果它是“ span” #span模板。

我想覆盖DataTable组件的模板,primeng这就是我的代码的样子:

我-datatable.component.ts

import { Component, OnInit, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
import { DataTable, DomHandler } from 'primeng/primeng';
import { ObjectUtils } from '../../../../node_modules/primeng/components/utils/ObjectUtils'
import { ColumnHeaders } from '../../../../node_modules/primeng/components/datatable/datatable'

@Component({
  selector: 'my-datatable',
  templateUrl: './my-datatable.component.html',
  styleUrls: ['./my-datatable.component.scss']    
})
export class MyDatatableComponent extends DataTable {

    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2, changeDetector: ChangeDetectorRef, objectUtils: ObjectUtils) { 
        super(el, domHandler, renderer, changeDetector, objectUtils);
        console.log('MyDatatableComponent');
    }

}

my-datatable.component.html,此文件与基本组件具有相同的模板.想法是先运行然后进行修改

<div [ngStyle]="style" [class]="styleClass" [style.width]="containerWidth" [ngClass]="{'ui-datatable ui-widget':true,'ui-datatable-reflow':responsive,'ui-datatable-stacked':stacked,'ui-datatable-resizable':resizableColumns,'ui-datatable-scrollable':scrollable}">
  <div class="ui-datatable-loading ui-widget-overlay" *ngIf="loading"></div> …

我有最简单的Angular结构指令:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[hello]' })
export class HelloDirective {
  constructor(
    private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
      this.viewContainer.createEmbeddedView(this.templateRef);
  }
}

我用这种方式:

<div *hello>Hello Directive</div>

它按预期显示"Hello Directive"消息.现在我想通过用另一个组件包装来更改内容:

<my-component>Hello Directive</my-component>

我希望该指令能够为我做到这一点.我知道我可以使用组件范例,HelloComponent而不是HelloDirective使用装饰器上的或ng-template由属性定义的模板来创建...但是有没有一种方法可以与指令范例一起使用来实现这样的结果？templatetemplateUrl@Component

我正在使用多个字段执行CRUD操作.我有[(ngModel)]所有的领域.

我不想更改[(ngModel)]的名称register.ts或edituser.ts在加载时分配或文件中的任何值.因为我已经使表单在寄存器模式下成功地将值保存到DB.我需要在编辑用户表单中显示插入的值以及如何执行该操作.

注意:我有几个其他字段,即文本字段,textarea,密码两种形式,但不知何故我设法在注册过程中将数据保存到数据库中,在编辑用户部分,我也显示了已在编辑模式下插入的值除了之外的所有其他输入类型ion-select.

例如:在登记表,如果用户选择了"男"在编辑模式的选项,我需要留在用户输入正确的,但形式再次表明"性别",而不是显示所选值.

下面我列出了包含的两种形式ion-select以及我所做的努力.

register.html

<ion-item>
  <ion-label floating>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
     <ion-option value="Male">Male</ion-option>
     <ion-option value="Female">Female</ion-option>
  </ion-select>
</ion-item>

Edituser.html

我尝试了各种各样的选择,但这一个单独工作.但这不是我要找的那个.到目前为止[(ngModel)]="editUser.gender"工作,并在选项标签中选择值,但这不是我想要的.我需要模型如下,[(ngModel)]="gender"但必须使用任何可用的方法选择值.

<ion-item>
   <ion-label floating>Gender</ion-label>
   <ion-select [(ngModel)]="editUser.gender" name="gender">
      <ion-option value="Male">Male</ion-option>
      <ion-option value="Female">Female</ion-option>
   </ion-select>
</ion-item>

editUser 包含来自DB的JSON数据.

这里的主要缺点是,当我提供这样的modelname时,在提交表单时不会获取值.所以我需要选项来选择值而不需要更改[(ngModel)].

我的目标是保持模型在register.html表格[(ngModel)] ="性别"中为Register和Edit Form保留.