标签: angular2-template

我们正在使用Angular 2和TypeScript构建应用程序.我们尝试静态检查可能的类型.有没有办法检查模板中的类型？请考虑以下片段:

<foo [data]="dataObj"></foo>

假设data在Foo组件中有某种类型TData.但是,默认情况下,没有什么能阻止我传递dataObj不符合的内容TData.是否有Angular模板的typescript扩展,可以在这种情况下验证类型？

我的页面中有一个子导航,在公共主视图下方显示一些子视图.我想通过一个对象传递给子视图,<router-outlet>这样我就可以在主组件中检索一次数据,然后与子组件共享它.

注意:如果我<one></one>在main.html中包含该指令,它可以工作,但这不是我想要的行为.

主要观点:

<h1>Details</h1>   
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a>   
<hr/>  
<router-outlet [data]="maindata"></router-outlet>

子视图1:

<h2>{{ data.name }}</h2>
...

主要观点:

@Component({
    selector: 'main-detail',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: './main.html'
})
@RouteConfig([
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
    maindata: Object = {name:'jim'};
}

子视图1:

@Component({
    selector: 'one', …

我已经阅读了Angular2的NgStyle文档.对我来说有点困惑.关于如何使用NgStyle与条件(if ... else)来设置任何元素的背景图像的任何想法？

我有以下HTML但我得到了例外.怎么解决？

解析器错误:插值({{}})其中表达式位于[!(editForm.controls.field_item_exportExpression _ {{i}} ?. dirty && editForm.controls.field_item_exportExpression _ {{i}}？无效的第48列) ]

<div class="form-group">
  <label class="form-control-label" for="field_exportExpression">exportExpression</label>
  <input class="form-control" type="text" id="field_item_exportExpression_{{i}}" name="item_exportExpression_{{i}}" [(ngModel)]="datatype.items[i].exportExpression" required>
  <div [hidden]="!(editForm.controls.field_item_exportExpression_{{i}}?.dirty && editForm.controls.field_item_exportExpression_{{i}}?.invalid)">
   <small class="form-text text-danger" [hidden]="!editForm.controls.field_item_exportExpression_{{i}}?.errors?.required" dpTranslate="dataconfiguration.validation.required"> This field is
                            required. </small>
 </div>
</div>

以下不起作用.说[找到不需要的令牌.

[hidden]="!editForm.controls.['item_exportExpression_' + i]?.errors?.required 

以下不是抱怨[而是抱怨Cannot read property '0' of undefined

 [hidden]="!editForm.controls.item_exportExpression_[ i]?.errors?.required 

我在模板中有一个条件如下:

<ng-container>
    <p *ngFor="let seat of InfoDetails?.seatInfo">
        <template *ngIf="seat.section">
            Section {{seat?.section}} ,
        </template>
        <template *ngIf="seat.row">
            Row {{seat?.row}},
        </template>
        <template *ngIf="seat.seatNo">
            Seat number {{seat?.seatNo}}
        </template>
    </p>
</ng-container>

我有包含row和的数据集seatNo,但它似乎没有在模板中打印.这是什么问题？

我有用于渲染SVG图标的组件:

import {Component, Directive} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';

@Component({
  selector: '[icon]',
  directives: [COMMON_DIRECTIVES],
  template: `<svg role="img" class="o-icon o-icon--large">
                <use [xlink:href]="iconHref"></use>
              </svg>{{ innerText }}`
})
export class Icon {
  iconHref: string = 'icons/icons.svg#menu-dashboard';
  innerText: string = 'Dashboard';
}

这会触发错误:

EXCEPTION: Template parse errors:
  Can't bind to 'xlink:href' since it isn't a known native property ("<svg role="img" class="o-icon o-icon--large">
<use [ERROR ->][xlink:href]=iconHref></use>
  </svg>{{ innerText }}"): SvgIcon@1:21

我该如何设置动态xlink:href？

我需要使用绑定将值数组传递给组件,例如

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

但是,似乎Angular将其视为string/ string[1](在实际项目中,数组是一个路由,我需要将此路由传递给具有该[routerLink]指令的组件).

我该怎么做？

我附上了我的angular2代码片的plunker.我想从我的JSON打印一个字段但是无法打印,因为最初我的Object是null并且它是通过Promise填充的.

这是我的组件文件

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ], …

我想在我的组件中显示不同的模板.只有一个会显示.如果hasURL是true,我想表明<a></a>.如果hasURL是false,我想表明<button></button>.

问题如果hasURL为false,组件显示按钮,但ng-content为空.因为它已经在第一篇中读到了"a></a>

有没有办法解决这个问题？

        <a class="bouton" href="{{ href }}" *ngIf="hasURL">
            <ng-content>
            </ng-content>
        </a>

        <button class="bouton" *ngIf="!hasURL">
            <ng-content>
            </ng-content>    
        </button>

谢谢!

在角度1中,我们可以用这种方式进行一次绑定:{{ ::myFunction() }}.

在角度2中,这是投掷:

EXCEPTION: Template parse errors:
Parser Error: Unexpected token : at column 2 in [{{ ::consent(false, undefined, box) }}] in CookieConsent@5:29 ("ull-right" href="" (click)="consent(true, $event, box)">De acuerdo</a>
        <span class="hidden">[ERROR ->]{{ ::consent(false, undefined, box) }}</span>

我们如何在angular2中进行一次绑定？