标签: angular2-template

我想使用ngSwitch有条件地呈现一些内容,但我希望该内容是唯一要呈现给DOM的内容.我将以一个例子来说明.

这就是我目前所拥有的:

<div [ngSwitch]="thing.name">
    <template ngSwitchWhen="foo">
        <div>FOOOOOO</div>
    </template>
    <template ngSwitchWhen="bar">
        <div>BARRRR</div>
    </template>
    <template ngSwitchWhen="cat">
        <div>CAT</div>
    </template>¯
    <template ngSwitchWhen="dog">
        <div>DOG</div>
    </template>
</div>

我想将父元素从a更改<div>为a,<template>因此只有最内部元素才会实际插入到DOM中.我怀疑它可能是可能的,因为我知道你可以做类似的事情ngFor,即:

<template ngFor [ngForOf]="things" let-thing="$implicit">

但是,我还没有弄清楚如何才能让它工作 ngSwitch

很抱歉,如果这很简单,但只是无法弄清楚...在我的Angular测试应用程序中,我试图在我的html模板中附加一个id以下内容:

<a href="https://www.domainname.com/?q="+{{text.id}}>URL</a>

这不会失败并出现错误(错误:无法在'Element'上执行'setAttribute')并且我不确定如何将{{text.id}}附加到此网址...我是否需要在我的组件中执行此操作,还是可以在html模板中以某种方式完成？

BTW.正如人们所预料的那样,这很好用(但这不是我想做的,我需要将text.id附加到url):

<a href="https://www.domainname.com/?q=">{{text.id}}</a>

有什么建议？

我想在angular2模板中使用内联if语句吗？

<select [(ngModel)]="value" class="form-control" (blur)="onBlur()">
    <option *ngFor="let item of items" [ngValue]="item">{{item.name?item.name:item}}</option>
</select>

如何{{item.name?item.name:item}}使用内联if语句使其成为可能？

我正在循环一组模型,并希望每个模型显示一个元素.但是,出于CSS的原因,我必须在到达第四个模型时添加另一个元素(我需要clearfix为布局添加一个Bootstrap 元素才能看起来很好).

<div class="jumbotron">
    <ol class="row">
        <li *ngFor="#card of deck; #i = index" class="col-xs-3">
            <h3>{{ card.name }}</h3>
        </li>
    </ol>
</div>

怎么说,如果(i + 1) % 4 === 0,然后li加上另一个<li class="clearfix"></li>？

如果我将链接移动到子组件,我的路由器链接将从根组件和相同的链接工作.plunker代码显示工作链接和非工作链接.先感谢您.以下是不起作用的链接.

//our root app component
import {Component} from '@angular/core'

@Component({
    selector: 'my-menu',
    template: `
    <div>
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a>
  </div>
`,
})
export class AppLayout {}

有问题的Plunker代码

我正在尝试为Jquery UI Datepicker创建自己的Angular 2指令.我在互联网上看到了一些不同的方法,但也没有人达到我想要的目标.所以这是我到目前为止的代码:

import {Directive, ElementRef, Input, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

declare  var $:any;

@Directive({
  selector: '[date-picker]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,useExisting:
      forwardRef(() => DatePickerDirective),
    multi: true
  }]
})
export class DatePickerDirective implements ControlValueAccessor {
  private value: string;

  @Input('changeMonth') changeMonth:boolean = true;
  @Input('changeYear') changeYear:boolean = true;

  constructor(private el: ElementRef) {

  }

  ngAfterViewInit(){
    $(this.el.nativeElement).datepicker({
      changeMonth: this.changeMonth,
      yearRange: "1:100",
      changeYear: this.changeYear
    }).on('change', e => this.onChange(e.target.value));
  }

  onChange: Function = () => {};

  onTouched: Function = () => {}; …

Angular 2有一个" 安全导航操作符 ",允许模板引用组件中可能未定义的子属性.

有没有办法使用动态属性和括号表示法？例如,

<input [type]="text" [ngModel]="formValues?[control]">

凡control从我的组件另一个变量告诉形成价值的使用和formValues加载异步的模板,以便有可能为空.

我有一个将函数作为输入的组件.我从父母传递了这个功能.

虽然调用了该函数,但该函数无法访问声明此函数的实例的依赖项.

这是组件

@Component({
  selector: 'custom-element',
  template: `
    {{val}}
  `
})
export class CustomElement {
  @Input() valFn: () => string;

  get val(): string {
    return this.valFn();
  }
}

以下是组件的使用方法

@Injectable()
export class CustomService {
  getVal(): string {
    return 'Hello world';
  }
}

@Component({
  selector: 'my-app',
  template: `
   <custom-element [valFn]="customVal"></custom-element>
  `,
})
export class App {
  constructor(private service: CustomService) {
  }
  customVal(): string {
    return this.service.getVal();
  }
}

当我运行这个应用程序时,我在控制台中收到错误说 Cannot read property 'getVal' of undefined

这是一个问题的掠夺者.

https://plnkr.co/edit/oQ229rXqOU9Zu1wQx18b?p=preview

我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要目的是拥有单独的HTML和SCSS文件和路由逻辑.

截至目前,我正在渲染页面,ngIf这使得我的页面非常冗长.有办法实现这个目标吗？

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @Component({
      selector: 'register-page',
      templateUrl: './register-page.component.html',
      styleUrls: ['./register-page.component.scss'],
      providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }

如何更改所选选项的颜色mat-list-option？现在我有这样的事情：

当前列表

我想将整个选项或卡片“选择时”的颜色更改为绿色。像这样的东西：

我的代码是这样的：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    {yuvak.name}
    {yuvak.phonenumber}
     </mat-list-option>
</mat-selection-list>