Tag: angular
dynamic更新Angular 2中的css
假设我有一个Angular2组件 //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } 该组件的模板html文件 //home.component.html <div class="home-component">Some stuff in this div</div> 最后是这个组件的CSS文件 //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } 正如你所看到的，这个类有两个属性， width和height 。 我希望宽度和高度的CSS样式匹配宽度和高度属性的值，当属性更新时，div更新的宽度和高度。 什么是正确的方法来完成这个？
在Angular2中dynamic组件select
给定一个包含多个字段的页面部分的模型，并填充如下所示的数据： { "fields": [ { "id": 1, "type": "text", "caption": "Name", "value": "Bob" }, { "id": 2, "type": "bool", "caption": "Over 24?", "value": 0 }, { "id": 3, "type": "options", "options" : [ "M", "F"], "caption": "Gender", "value": "M" } ] } 我想有一个通用的部分组件，它不知道它可能包装的不同types的字段，以避免大量的章节模板中的条件逻辑，并通过放入自己添加新的字段types的视图/组件包含的文件，而不必修改一个单独的组件。 我的理想将是一个组件的select器是足够具体的，我可以通过在父组件的模板中select一个基于绑定到模型的属性值的元素来实现这一点。 例如：（赦免任何语法问题，因为我在SO窗口中编码，要注意的主要部分是BooleanComponent.ts上的select器 SectionComponent.ts @Component({ selector: 'my-app' }) @View({ template: ` <section> <div […]
Angular 2：不能绑定到x，因为它不是一个已知的本地属性
在Angular 2组件中，我有authbox.component.ts import {Component} from 'angular2/core'; import {COMMON_DIRECTIVES} from 'angular2/common'; import {Credentials} from './credentials' @Component({ selector: 'authbox', template: `<div> <div class="login-panel" *NgIf="!IsLogged"> <input type="text" *NgModel="credentials.name" /> <input type="password" *NgModel="credentials.password" /> <button type="button" (click)="signIn(credentials)">→| Sign In</button> </div> <div class="logged-panel" *NgIf="IsLogged"> <span>{nickname}</span> <button type="button" (click)="signOut()">|→ Sign out</button> </div> </div>`, directives: [COMMON_DIRECTIVES] }) export class AuthBoxComponent { private […]
Angular 2 UI组件 – 哪个库？
我正在试图find一些有用的用户界面组件，angular2工作。我对Angular 2真的很新（而且从来没有使用angular1）。 有人告诉我，Prime NG可能是非常好的，看起来就是这样。 但是我想知道是否有其他人能够find一个更好的图书馆的UI组件，Angular 2的工作良好。似乎似乎还没有。 引导4仍然在阿尔法，我正试图select一些稳定的时刻，但我认为提升4是伟大的。 从： angular材2 燃油UI Kendo UI NG-bootstrapng雷击 NG2自举 温泉用户界面 素面 语义UI Vaadin 哪一个稳定的库是最好的select（支持，速度，configuration，function丰富等），如果每一个都包含我需要的组件？
有angular的cookies
我一直在寻找angular落的cookies，但我一直没有find如何在Angular中实施cookiespipe理。 有什么办法来pipe理cookie（如AngularJS中的$ cookie ）？
AngularJS：为每个端点创build多个工厂？
下面是一些例子，看来我们可以注入一个工厂，其中包含一个rest服务的端点 services.factory('Recipe', ['$resource', function($resource) { return $resource('/recipes/:id', {id: '@id'}); }]); 这看起来不错，但想象一下，我还有其他的端点，例如/ users /：id和/ groups /：id，就像你想象的那样，不同端点的数量会增加。 因此，为每个端点设置不同的工厂是一个很好的做法。 services.factory('Recipe', ['$resource',………… services.factory('Users', ['$resource',…………. services.factory('Groups', ['$resource',…………… 还是有另一种推荐的方式？ 我真的没有看到它的问题，但它会迫使我创build很多工厂只是为了处理不同的端点。 任何帮助或指导真的apprecaited 谢谢
我怎样才能等待一个条件？
我是量angular器新手，我试图实施e2etesting。 我不知道这是否是正确的方式来做到这一点，但是…我想testing的页面不是一个完整的angular度页面，所以…我有一些麻烦。 在我的第一个规范中，我有： describe('should open contact page', function() { var ptor = protractor.getInstance(); beforeEach(function(){ var Login = require('./util/Login'); new Login(ptor); }); 我已经创build了这个Login类，但login后我想打开联系页面，但量angular器立即尝试在页面完全加载之前find元素。 我试过使用： browser.driver.wait(function() { expect(browser.findElement(by.xpath("//a[@href='#/contacts']")).isDisplayed()); ptor.findElement(by.xpath("//a[@href='#/contacts']")).click(); }); 但它不工作…它总是试图find页面加载之前的元素。 我也试过这个： browser.driver.wait(function() { expect(ptor.isElementPresent(by.xpath("//a[@href='#/contacts']"))); ptor.findElement(by.xpath("//a[@href='#/contacts']")).click(); }); 我能够做到这一点使用browser.sleep(); 但我不认为这是一个好的select。 任何想法？ 在我的login类中，我有： ptor.ignoreSynchronization = true; 在量angular器尝试点击它之前，如何等待这个@ @href='#/contacts ？
如何改变Toast的颜色取决于Angular材质$ mdToast的消息types？
当使用$mdToast.simple().content("some test")它显示黑色的敬酒。 我怎样才能改变颜色为红色，黄色等等，取决于错误信息的types，如错误，警告和成功。 类似的问题是这样的 。
ngSubmit以Angular 2forms刷新页面
我正在使用Angular2模板来创build表单。 当我点击button，页面刷新。 我的validation工作正常。 当用户点击button时，如何停止页面刷新？ 以下是我正在使用的HTML： <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Add Employee</h3> {{model | json}} {{EName.errors | json}} </div> <div class="panel-body"> <form (ngSubmit)="onSubmit(empForm)" #empForm="ngForm" autocomplete="off" novalidate> <div class="form-group"> <label for="EmployeeName">Employee Name</label> <input type="text" class="form-control" id="EmployeeName" placeholder="Employee Name" required [(ngModel)]="model.EName" name="EName" #EName="ngModel" ngControl="Ename" #EName="EName" > <div *ngIf="EName.touched && EName.errors" > <div *ngIf="EName.errors.required" class="alert alert-danger"> Employee […]
Observabletypes错误：无法读取undefined的属性
Angular 2应用程序，我得到一个错误：不能读取未定义的属性“标题”。 这是一个非常简单的组件，只是为了获得最低限度的工作。 它命中我的API控制器（好奇地多次），它似乎击中了我的代码中返回对象后的callback区域。 我的console.log输出我期望的对象。 这是完整的错误： TypeError: Cannot read property 'title' of undefined at AbstractChangeDetector.ChangeDetector_About_0.detectChangesInRecordsInternal (eval at <anonymous> (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:10897:14), <anonymous>:31:26) at AbstractChangeDetector.detectChangesInRecords (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8824:14) at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8807:12) at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14) at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12) at AbstractChangeDetector._detectChangesContentChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8871:14) at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8808:12) at AbstractChangeDetector._detectChangesInViewChildren (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8877:14) at AbstractChangeDetector.runDetectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8811:12) at AbstractChangeDetector.detectChanges (http://localhost:55707/lib/angular2/bundles/angular2.dev.js:8796:12) 服务（about.service.ts）： import {Http} from 'angular2/http'; import {Injectable} from […]
