我有三个嵌套组件,称为level0,level1并且level2,定义如下:

@Component({
selector: 'level2',
template: `<div>I am level 2</div>`,
})
export class Level2 {
  getName(){
    return "my name is 'TWO'";
  }
}

@Component({
selector: 'level1',
template: `<div>I am level 1<level2></level2></div>`,
directives: [Level2]
})
export class Level1 {
  getName(){
    return "my name is 'ONE'";
  }
}

@Component({
selector: 'level0',
template: `<div>I am level 0<level1></level1></div>`,
directives: [Level1,Level2]
})
export class App {
@ViewChild(Level1) level1:Level1;
@ViewChild(Level2) level2:Level2;
ngAfterViewInit() {
  if(this.level1){var name1 = this.level1.getName();}
  if(this.level2){var name2 = this.level2.getName();} …

我有一个递归结构,由两个组件组成:

• OptionsMenuComponent(A菜单)
• MenuItemComponent(菜单项)

OptionsMenuComponent :( 模板+组件)

Template:
    <menu-item *ngFor="let menuItem of menu.menuItems" [menuItem]="menuItem"> </menu-item>

Component:
    import { Component, Input } from '@angular/core';
    import { Menu } from '../models/menu.model';
    import { MenuItemComponent } from '../menu-item/menu-item.component';

    @Component({
        moduleId: __moduleName,
        selector: 'options-menu',
        templateUrl: 'options-menu.component.html',
        styleUrls: ['options-menu.component.css'],
        directives: [MenuItemComponent],
    })
    export class OptionsMenuComponent {
        @Input() menu: Menu;

        constructor() { }
    }

菜单项:(模板+组件)

Template:
    <span class="menu-item-title">{{menuItem.title}}</span>

    <options-menu *ngIf="menuItem.subMenu != null" [menu]="menuItem.subMenu" class="sub-menu"> </options-menu>

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

我有一个物质输入控件,我在用户输入时限制了特殊字符,但是在任何编辑器中键入一些单词并复制并粘贴具有特殊字符的单词时,这是不起作用的.

我已经编写了指令来防止特殊字符,但可以在复制粘贴中提供更好的解决方案限制.

app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指示:

import { Directive, HostListener, Input } from '@angular/core';
@Directive({
    selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

    regexStr = '^[a-zA-Z0-9_]*$';
    @Input() isAlphaNumeric: boolean;

    @HostListener('keypress', ['$event']) onKeyPress(event) {
        return new RegExp(this.regexStr).test(event.key);
    }

}

演示见这里:

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e[stackblit

重现步骤:

输入不允许的特殊字符:工作正常.而复制粘贴机智允许特殊字符

精简版

此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; …

在角度1.x中,我们可以通过在指令内要求它来引用父控制器.但是,由于整个命名切换为角度2,我似乎无法找到相应的功能？

到目前为止我尝试过的事情:

• 我看到的一种方法是将@输入父母进入孩子,但这似乎有点多.
• 我看到的另一种方式是使用服务,但这给了我一定的恐惧,据我所知,服务仍然是一个单身,所以其他组件现在可能搞乱一个不同组件的孩子的东西(如果那个孩子引用了服务)...
• 最后它使用了这些局部变量的东西(带有主题标签的东西),但这看起来与输入的第一个选项相同.

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

从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> …

这是一些代码片段。同样的模式 (afaik) 适用于英雄教程。

登录.component.html：

<div class="four wide column middle aligned" *ngIf="wrongCredentialsInserted">
     <div class="ui error message">Invalid credentials
     </div>
 </div>

登录.component.ts：

wrongCredentialsInserted: boolean = false;

//...      

onSubmit(login: LoginDto): void {
        console.log(`User '${login.username}' attempts to login...`);
        if (this.authService.login(login.username, login.password)) {
          this.location.back();
        } else {
          this.wrongCredentialsInserted = true; //This line gets executed!
        }
      }

即使我设置wrongCredentialsInserted为 true ，该消息也不会显示。它被设置为 true，我已经验证过了。我也尝试过类似的东西*ngIf="wrongCredentialsInserted === true"，因为我在其他地方读到过，但是没有用。我读到这可能与“单向数据流，从 Angular 2 开始”有关，但我知道我们能够在我们公司的 A2+ 项目中做这样的事情。AFAIK 一种方式数据绑定仅指组件-组件通信。

任何形式的帮助都受到高度赞赏。

编辑：由于我所做的事情似乎有点混乱，我将整个文件发布在这里。

登录.component.ts

import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {routerTransition} …