标签: angular2-template

我有两个这样的组件:

@Component({
    selector: 'comp1',
    template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
    custom_text:string;
    constructor(text:string) {
        this.custom_text = text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1></comp1>
    `
})
export class Comp2 {
    constructor() {
        // ...
        // How to send my own text to comp1 from comp2
        // ...
    }
}

是否有可能从把我自己的文字comp1来comp2？

是否可以从中获取comp1实例comp2？

谢谢.

任何人都可以指导如何在Angular 2 RC2中使用移动手势.

可能是这样的:

<div (swipeLeft)="OnSwipeLeft()"></div>

从API可以看出

HAMMER_GESTURE_CONFIG 
HammerGestureConfig

下

@angular/platform-browser

但不知道如何使用它.

在一些帖子中我看到一些用户建议包括Hammer.js.但我相信如果它已经在api我们应该能够以一种简单的方式包含和使用它.

我想将来自后端的rgb值(例如"200,55,100")绑定到div的背景颜色.

这不起作用,它会抛出模板解析异常.

<div [style.background-color]="rgb({{model.color}})"

我该怎么做？

UPDATE

<div [style.background-color]="s.getColor()"> class="md-chip" *ngFor="let s of sums">
    <div class="md-chip-img">
        <span style="text-align:center" class="md-chip-span">X</span>
    </div>
    <span class="md-chip-text">{{s.subjectName}}</span>
</div>

在Angular2中,我有一个对象列表,我正在尝试使用bootstrap的网格布局系统,但是在Angular2中找出如何做到这一点时遇到一些困难.任何帮助,将不胜感激!

如果我使用HandlebarsJS,我可以使用以下代码完成此操作:

{{#for elements}}
    {{#if index % 12 === 0}}
          <div class="row">
    {{/if}}
    <div class="col-md-2">
          {{element.name}}
    </div>
    {{#if index % 12 === 0}}
          </div>
    {{/if}}
{{/for}}

所以我希望它看起来像:

<div class="row">
    <div class="col-md-2">
        Bob
    </div>
    <div class="col-md-2">
        Joe
    </div>
    ...
</div>
<div class="row">
    <div class="col-md-2">
        Julie
    </div>
    <div class="col-md-2">
        Cheryl
    </div>
    ...
</div>

我把Thymeleaf th:在angular2模板中,但是th:不会编译.有什么方法可以一起使用它们吗？

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


@Component({
     selector: 'my-app',
     template: `
     <table xmlns:th="http://www.w3.org/1999/xhtml">
         <tbody>
            <tr>
                <th>User Name</th>
                <th th:each="role : ${roles}">
                   <div class="row">
                       <div th:text="${role.type}"></div>
                   </div>
                </th>
            </tr>
        </tbody>
    </table>`,
    })
export class App {}

我不是angular2的专家.我想知道如何解决此错误:

inline template:0:6332 caused by: Expression has changed after it was checked. Previous value: 'btn-disabled'. Current value: ''.

 [ngClass]="!formValid() ? 'btn-disabled': ''"

你对这个错误的看法是什么？

我有以下文件:

topnav.component.ts

import { Component } from '@angular/core';
import { EnvironmentService } from '../services/ipc/environment.service';

const { ipcRenderer } = electron;

@Component({
  selector: 'app-topnav',
  templateUrl: './topnav.component.html',
  styleUrls: ['./topnav.component.scss']
})
export class TopnavComponent {
  version: string = null;

  constructor(private environmentService: EnvironmentService) {
    this.environmentService.getVersionInfo();

    ipcRenderer.on('environment-reply', (event, arg) => {
      console.log(arg);
      this.version = arg;
    });
  }
}

topnav.component.html

...
    <div *ngIf="version">{{version}}</div>
...

在代码中,我正在检索有关我正在运行的环境的版本信息,并更新版本属性并希望它在我的视图中更新.调用getVersionInfo()是异步的,并在电子中使用ipcMain和ipcRenderer通信结构.我能够验证这些是否按预期工作.角度和电子都没有误差.

我已经验证了该版本确实在arg param中返回并按预期登录到控制台; 但是,在我浏览我的应用程序之前,它不会显示在视图中.这让我相信它与Angular 2中的组件生命周期和变化检测有关.但是,我对Angular 2和Electron都是一个新手.

关于可能发生的事情以及如何解决问题的任何指示或想法？

我试过几次迭代formArray,

这是这个案例的plunker链接https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview

我想要像这样的插件https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview

这是我的情景

[

{
  "id": 1,
  "legend": "businessModule",
  "group": [

    {
      "id": 1,
      "permission": {
        "controleType": "ff",
        "id": 2,
        "key": "create Business"
      },
      "roles": [
        {
          "id": 1,
          "name": "self"
        },
        {
          "id": 2,
          "name": "other"
        }
      ]
    },


    {
      "id": 1,
      "permission": {
        "controleType": "ff",
        "id": 2,
        "key": "edit business"
      },
      "roles": [
        {
          "id": 1,
          "name": "self"
        },
        {
          "id": 2,
          "name": "other"
        }
      ]
    }

  ]
},


{
  "id": 2,
  "legend": "PanicModule",
  "group": …

如何在Angular 2中设置的时间间隔内调用函数.我希望在特定的时间间隔(例如10秒)调用/触发它.对于Eg:ts文件

num: number = 0;
array: number[] = [1,5,2,4,7];
callFuntionAtIntervals(){
    if(num==5){
        num=0;    
    }
    num++;
}

HTML:

<div>{{ array[num] }}</div>

所以基本上div值会每隔一段时间改变一次

在角度2中是否有任何方法,以便我们可以像在角度1中那样实现单向数据绑定.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
<h4>please change the text box value to see the scenario</h4>
  <p>Name : <input type="text" ng-model="name" 
ng-init="name='change me '"></p>
  <h1>Hello {{name}}</h1>
<h2>One-way binding- </h2>
{{::name}}
</div>

</body>
</html>

我们如何以Angular 2的方式实现这一目标.我们有什么替代品.

注意:我不想仅反映HTML上的更改.我需要更新的值@component end,但我不想仅在UI上显示更改