标签: angular2-template

我们可以使用jquery轻松删除类似的东西,但我们可以使用angular来做这样的事情吗？

<tr>
<td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" (click)="onClickRemove($event)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>
</tr>

在Component.ts中:

onClickRemove($event) {
}

如何在此处访问行或单元元素,从哪里引发事件？

在Angular 2中,创建一个简单的应用程序但是当在选择列表的情况下使用DOM控件附加formBuilder时,第一个选项变为空白 - 即使我在formBuilder中提供了一些初始值,该值不是来自DOM元素

在FomBuilder之前

选择列表
Genral
LDAP

在FomBuilder之后

选择List
No选项最初出现
Genral
LDAP

File 1 - form.component.ts

import { Component } from '@angular/core';
import { FormBuilder, Validators, REACTIVE_FORM_DIRECTIVES, FormGroup, FormControl } from '@angular/forms';

@Component({

        moduleId : module.id,
        selector : 'login',
        templateUrl : 'login.component.html',
        directives : [ REACTIVE_FORM_DIRECTIVES ],
})

export class LoginComponent{

        loginForm : FormGroup;

        constructor(private _router:Router,private _fb:FormBuilder){

                this.loginForm = _fb.group({
                    'username' : ['aa',[Validators.required]],
                    'password'  : ['',[Validators.required]],
                    'type'  : ['']
                })            
        }
      }

     loginUser(){
        console.log("Form is  = ",this.loginForm.controls);
     }

文件2 …

我有一个用户数组,每个用户都有一个名字(user.name):

let users = Array<User>();

想象一下,我有这个字符串数组我希望users根据下一个字符串数组过滤数组:

let filterargs = ['Lau', 'Za'];

这是我的标记:

<li *ngFor="let user of usersList | filter: filterargs; let i = index;">

这是我的管道过滤器,但它无法正常工作:

import {Pipe, Injectable, PipeTransform} from "@angular/core";

@Pipe({name: 'filter', pure: false})
@Injectable()
export class FilterPipe implements PipeTransform {

    transform(items: any[], args: any[]): any {
        // filter items array, items which match and return true will be kept, false will be filtered out
        return items.filter(item => item.name.toLowerCase().indexOf(args[0].name.toLowerCase()) !== -1);
    }
}

在我的数据表项目中,开发人员能够在表声明中声明模板,以用于标题单元格和正文单元格.

<datatable>
    <datatable-column name="Name">
        <template let-column="column">
            Header: {{column.name}}
        </template>
        <template let-value="value">
            Hi: <strong>{{value}}</strong>
        </template>
    </datatable-column>
    <datatable-column name="Age">
        <datatable-body-template let-value="value">
            I'm: <strong>{{value}}</strong> old
        </datatable-body-template>
    </datatable-column>
</datatable>

在上面的例子中,第一个模板是标题单元格模板,第二个模板是主体单元格模板,顺序很重要.如果您只声明一个模板,它将只执行体细胞模板.你可以看到这是如何正在做目前这里.

我目前允许你TemplateRef通过a 传递Input给column指令但是这种方法没问题,但作为API使用者,组件定义中的声明性模板是一种更清洁的方法.

值得注意的是,它不可能通过类似的方式进行命名#body,#header因为您可以使用多个列使名称不唯一.

这个DSL不是非常直观,因为它不是非常明确的,哪个取决于订单.ng-content允许你输入一个选择器属性,我想知道用模板完成类似事情的最佳方法是什么？所以类似于:

<datatable>
    <datatable-column name="Name">
        <datatable-header-template let-column="column">
            Header: {{column.name}}
        </datatable-header-template>
        <datatable-body-template let-value="value">
            Hi: <strong>{{value}}</strong>
        </datatable-body-template>
    </datatable-column>
</datatable>

我正在四处寻找是否有可能超越它,TemplateRef但我不确定那是不是一个好主意.

所以说...我的问题,我怎样才能完成命名的选择器模板引用？

在angular2中单击该按钮时,如何更改<button>的文本？

例如,将按钮文本从"保存"更改为"正在保存...",然后将其设置为禁用.

我知道如何在AngularJS,jQuery和普通JS中做到这一点,我对如何在Angular2中做到这一点有一些想法,但我想确保我不是以一些过时或复杂的方式做到这一点,当涉及到Angular2.

我有一个带有以下元素的角度(2.4.9)模板:

<div *ngIf="a || b || c || d || e">Remaining</div>

我现在面临着根据另一个条件改变迄今为止静态的"剩余"文本的需要:

<div *ngIf="a || b || c || d || e || Z != 'draft'">Initial</div>
<div *ngIf="a || b || c || d || e || Z == 'draft'">Remaining</div>

在*ngIf已经加载了,我想阻止不必重复它,因为我在上面的例子一样,只是为了添加一个额外的条件.

我也想避免这样做:

<div *ngIf="a || b || c || d || e">
    <div *ngIf="Z != 'draft'">Initial</div>
    <div *ngIf="Z == 'draft'">Remaining</div>
</div>

...因为这会改变页面的结构,从而改变样式规则.

所以,不是在div中引入一个具有自己的新元素*ngIf,这会导致我们添加样式规则,我正在寻找类似于条件插值语法的东西,这样我就可以写了

<div *ngIf="many || conditions">{{ status === "DRAFT" ? 'Initial' : 'Remaining' }}</div>

以类似的方式,你也可以做 …

<router-outlet></router-outlet>导航到“ / child”路由时，我的应用程序的根目录将在子模块中显示以下组件：

child.component.ts

import {Component} from "@angular/core";

@Component({
  template: `
    <div style="display:flex; width: 100%; height: 100%;">
      <custom-sidebar-component></custom-sidebar-component>
      <router-outlet></router-outlet>
    </div>`
})
export class ChildComponent {
}

现在，此组件可以正常显示，并可以按预期填充整个屏幕。但是，当我尝试导航到该模块的子路径时，例如说“ / child / home”，我希望以下HTML显示在<router-outlet></router-outlet>上面的组件模板中看到的子路径中。

child-home.component.html

<style>
  .parent-style {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
  }

  .box-style {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: red;
    color: white;
    border: 1px solid black;
  }
</style>
<div class="parent-style">
  <div class="box-style">Box 1</div>
  <div class="box-style">Box 2</div>
</div>

但是这次，路由器出口的内容没有按我希望的那样填充可用空间。我能够看到我想要的结果的唯一方法是打开开发工具并编辑包装组件的Angular生成的_nghost属性。如何获得我的组件以填充可用空间？

这是我的期望

这就是我真正得到的

我在Angular应用程序中有一个动态创建的组件,如下所示:

const factory = this.resolver.resolveComponentFactory<IMessage>(MessageComponent);
this.component = this.container.createComponent(factory);
this.component.instance.body = message;

它相当于添加<message [body]="message"></message>组件的HTML.

让我们假设,我想在我的动态组件代码中实现类似的东西:

<message [body]="message" #form="my-form" (change)="myFunction()"></message>

如何绑定这些附加变量并通过组件的ts文件更改内部事件？

我正在使用ngTemplateOutlet加载。但是它会多次加载模板。正在加载正确的模板，但会多次执行loadTemplate（）方法。

在HTML中：

<table>
    <thead>
    </thead>
    <tbody>
        <ng-template [ngTemplateOutlet]="loadTemplate()"></ng-template>
    </tbody>
</table>

<ng-template #template1>
    <tr *ngFor="iteration">
        <p>Hiii</p>
    </tr>
</ng-template>

<ng-template #template2>
    <tr *ngFor="iteration">
        <p>Byee</p>
    </tr>
</ng-template>

在我的component.ts中：

@ViewChild('template1') template1: TemplateRef<any>;
@ViewChild('template1') template1: TemplateRef<any>;
loadTemplate(){
    if (condition)
        return this.template1;

    return this.template2;
}

如何连接以下两个语句。两者都自己工作。

<app-output [warnMessage]="myvalue | number:'1.0-1'"></app-output>

<app-output [warnMessage]="'TEXT01' | translate"></app-output>

现在，我想将两者结合起来。我该如何实现？例如：

<app-output [warnMessage]="myvalue | number:'1.0-1' + 'TEXT01' | translate"></app-output>