小编Dan*_*pel的帖子

我正在尝试绑定我的类中的颜色属性(通过属性绑定获取)来设置background-color我的div.

import {Component, Template} from 'angular2/angular2';

@Component({
  selector: 'circle',
  bind:{
    "color":"color"
  }
})
@Template({
  url: System.baseURL + "/components/circle/template.html",
})
export class Circle {
    constructor(){

    }

    changeBackground():string{
        return "background-color:" + this.color + ";";
    }
}

我的模板:

<style>
    .circle{
        width:50px;
        height: 50px;
        background-color: lightgreen;
        border-radius: 25px;
    }
</style>
<div class="circle" [style]="changeBackground()">
    <content></content>
</div>

该组件的用法:

<circle color="teal"></circle>

我的绑定不起作用,但也没有任何例外.如果我将{{changeBackground()}}某个地方放在模板中,那确实会返回正确的字符串.那么为什么样式绑定不起作用？

还想到它,我如何观察Circle类中color属性的变化？什么是替代品

$scope.$watch("color", function(a,b,){});

角度2.0？

我在使用Angular2和SystemJS运行以下版本的JSPM时遇到以下问题(版本:Angular@2.0.0-alpha.27,JSPM @ 0.16.0-beta.2和SystemJS@0.18.0)曾经的打字稿是编译(没有错误)我在浏览器中收到以下错误:

/jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators

现在,当我手动包含文件Reflect.js:\ jspm_packages \npm\reflect-metadata@0.1.0\Reflect.js时,问题就消失了但是下一个问题出现了,说明列表在另一个角度文件中是未定义的.

从system.js和typescript/jspm.io看到下面的bitbucket src中的配置文件(src代码)

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a

我想知道的是,如果它现在甚至可以使用jspm和system.js来检索角度正常运行所需的所有角度包.看作system.js的配置确实明确指出angular取决于它:

"npm:angular2@2.0.0-alpha.27": {
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "path": "github:jspm/nodelibs-path@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.1",
  "reflect-metadata": "npm:reflect-metadata@0.1.0",
  "rx": "npm:rx@2.5.1",
  "url": "github:jspm/nodelibs-url@0.1.0",
  "zone.js": "npm:zone.js@0.5.1"
},

但它们未被检索(查看网络选项卡)

我尝试解决它时,我的for循环有一个tslint错误,它说要转换为for-of.我见过很多文档,但它没有帮助.如何解决lint错误,我不能做tslint:disable-next-line:prefer-for-of

for (let i = 0; i < this.rows.length; ++i) {
    if (!this.rows[i].selected) {
        this.selectAllChecked = false;
        break;
    }
}

截至目前,有没有办法for..of在Angular 2 的指令中获取iterable的当前索引？换句话说,相当于$indexAngular.js v1 ......

代码示例:

<ul *for="#task of allTasks">
    <li>{{ $index}} - {{ task.label }}</li>
</ul>

(当然这段代码不起作用,它不提供当前索引)

我有一个基本的准备.我可以在JS中包含HTMl代码吗？(带"document.write")

这是我的HTMl代码:

    <li><a href="#" class="menulink">text</a></li>
<li><a href="#" class="menulink">text</a> </li>
<li><a href="#" class="menulink">text</a>
    <ul>

        <li>
            <a href="#" class="sub">text</a>
            <ul >
                <li class="topline"><a href="#">text</a></li>
                <li><#">text </a></li>
                <li><a href="#">text</a></li>
                <li><a href="#">text</a></li>
                <li><a href="#">text</a></li>
                <li><a href="#"text</a></li>
                <li><a href="#">text</a></li>

            </ul>
        </li>
        <li>
            <a href="#" class="sub">text </a>
            <ul>
                <li class="topline"><a href="#">text</a></li>
                <li><a href="#">text</a></li>



    </ul>
</li>

    <li>
                    <a href="#" class="sub"> text  </a></li>
            <li>
                    <a href="#" class="sub"> text  </a></li>
           </ul>
        </li>

            <li>
    <a href="#" class="menulink">text</a>


</li>
<li><a href="#" class="menulink">text</a>

我想将它包含在这个JS代码中

window.onload = function () {
    document.getElementById("menu").innerHTML="";

通过此代码连接它:

<p …

我最近从 Webpack 2 升级到 4。Webpack 编译，并且大部分应用程序运行良好。它似乎是应用程序的损坏部分。我收到错误

NullInjectorError: No provider for InjectionToken config!

我的module.ts文件如下

NullInjectorError: No provider for InjectionToken config!

完整的错误信息是

import { enableProdMode, Inject, Injector, ErrorHandler } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { WsBootstrapService } from '../services/bootstrap';
import { WsBrandTypesService } from '../services/brandTypes';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, UrlHandlingStrategy, UrlTree } from '@angular/router';
import { FormsModule } from '@angular/forms';
import …

我在登录页面使用了模板驱动的表单.我想在输入元素上有一个红色边框,如果它们无效或有任何错误,borderRed但当输入为空或无效时,该类没有添加到输入元素上.

<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="m-login__form m-form" action="">
  <ng-template #alertSignin></ng-template>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label>
      Email <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="email.invalid" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
  </div>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label [pTooltip]="attachementTooltipmsg" tooltipPosition="top" for="form_control_1">
      Password <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="password.invalid" class="form-control m-input" required="" name="password" type="password" [(ngModel)]="model.password" #password="ngModel">
  </div>

  <div class="m-login__form-action">
    <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
      Sign In
    </button>
  </div>
</form>

是否可以在需要条件操作的字符串上使用 i18n

<h2 i18n>{{ updateMode ? 'Edit' : 'Add'}}</h2>

我最近将应用程序从Angular 4升级到Angular5。该应用程序在chrome中运行良好，但是当我尝试在IE 11中运行该应用程序时，它给了我以下错误，并且页面无法加载。

以下是我在polyfills.ts中拥有的代码：

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" …

您好，我正在 Angular 5 中使用路由，并且我有一个使用 canActivate 属性的登录路径

当 canActivate 为 false 时，我可以重定向到另一个路径吗？我不希望用户在登录后看到登录页面。

如果用户登录，这里主服务返回 false

{
    path: 'login',
    component: RegisterLoginComponent,
    canActivate: [MainService]
}