Tag: angular

如何扩展/inheritanceAngular2组件？: 题我想为已经部署在Angular 2中的一些组件创build扩展，而不必几乎完全重写它们，因为基本组件可能发生变化，并希望这些变化也反映在派生的组件中。例我创build了这个简单的例子，试图解释更好的问题：使用以下基本组件app/base-panel.component.ts ： import {Component, Input} from 'angular2/core'; @Component({ selector: 'base-panel', template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>', styles: [` .panel{ padding: 50px; } `] }) export class BasePanelComponent { @Input() content: string; color: string = "red"; onClick(event){ console.log("Click color: " + this.color); } } 您是否想创build另一个派生组件，例如，在示例颜色app/my-panel.component.ts的情况下，基本组件行为： import {Component} from 'angular2/core'; import {BasePanelComponent} from […]

将Angular2的TypeScript文件和JavaScript文件分离到不同的文件夹中，可能是'dist': 我正在使用angular.io网站的5分钟快速入门，其中包含如下的文件结构： angular2-quickstart app app.component.ts boot.ts index.html license.md package.json tsconfig.json tsconfig.json是这样的代码块： { "compilerOptions": { "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } 还有package.json： { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "start": "concurrent \"npm run […]

Angular 2unit testing：找不到名字'describe': 我正在从angular.io继续这个教程正如他们所说，我已经创build了hero.spec.ts文件来创buildunit testing： import { Hero } from './hero'; describe('Hero', () => { it('has name', () => { let hero: Hero = {id: 1, name: 'Super Cat'}; expect(hero.name).toEqual('Super Cat'); }); it('has id', () => { let hero: Hero = {id: 1, name: 'Super Cat'}; expect(hero.id).toEqual(1); }); }); unit testing就像一个魅力。问题是：我看到一些错误，在教程中提到：我们的编辑和编译器可能会抱怨说，他们不知道it和expect是什么it因为他们缺乏描述茉莉花的打字文件。现在我们可以无视那些烦人的投诉，因为它们是无害的。他们确实忽视了它。即使这些错误是无害的，当我收到他们一堆时，在我的输出控制台中看起来不太好。我得到的例子： […]

如何以编程方式围绕angular落并设置随机背景颜色: 我想绕过视图的angular落，并根据运行时的内容更改视图的颜色。 TextView v = new TextView(context); v.setText(tagsList.get(i)); if(i%2 == 0){ v.setBackgroundColor(Color.RED); }else{ v.setBackgroundColor(Color.BLUE); } v.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); v.setPadding(twoDP, twoDP, twoDP, twoDP); v.setBackgroundResource(R.drawable.tags_rounded_corners); 我希望设置drawable和颜色会重叠，但他们不。无论我执行第二个是由此产生的背景。有没有办法以编程方式创build此视图，请记住，直到运行时才会决定背景颜色？编辑：我只是现在换红色和蓝色进行testing。稍后颜色将由用户select。编辑： tags_rounded_corners.xml： <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:bottomRightRadius="2dp" android:bottomLeftRadius="2dp" android:topLeftRadius="2dp" android:topRightRadius="2dp"/> </shape>

如何从父组件的CSS文件样式的子组件？: 我有一个父组件： <parent></parent> 我想用子组件来填充这个组： <parent> <child></child> <child></child> <child></child> </parent> 父模板： <div class="parent"> <!– Children goes here –> <ng-content></ng-content> </div> 儿童模板： <div class="child">Test</div> 由于parent和child是两个独立的组成部分，他们的风格被locking在自己的范围内。在我的父组件中，我尝试过： .parent .child { // Styles for child } 但.child样式不会被应用到child组件。我尝试使用styleUrls将parent的样式表包含到child组件中以解决范围问题： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] 但是，这并没有帮助，也试图通过将child样式表提取到parent但也没有帮助。那么如何devise包含在父组件中的子组件呢？

Angular 2显示并隐藏一个元素: 我有一个隐藏的问题，并显示一个依赖于Angular 2中的布尔variables的元素。这是div显示和隐藏的代码： <div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert"> <strong>List Saved!</strong> Your changes has been saved. </div> 该variables是“编辑”，它存储在我的组件： export class AppComponent implements OnInit{ (…) public edited = false; (…) saveTodos(): void { //show box msg this.edited = true; //wait 3 Seconds and hide setTimeout(function() { this.edited = false; console.log(this.edited); }, 3000); } } […]

基于angular色的访问控制（RBAC）与ASP.NET MVC中的基于声明的访问控制（CBAC）: 使用CBAC和RBAC的主要好处是什么？什么时候使用CBAC更好？何时使用RBAC更好？我试图理解CBAC模型的一般概念，但总体思路对我来说还不清楚。

从Angular 2服务创build和返回Observable: 这更像是一个“最佳实践”的问题。有三个参与者：一个Component ，一个Service和一个Model 。 Component正在调用Service以从数据库中获取数据。该Service正在使用： this.people = http.get('api/people.json').map(res => res.json()); 返回一个Observable 。 Component可以只订阅Observable ： peopleService.people .subscribe(people => this.people = people); } 但是，我真正想要的是Service返回从数据库中检索的数据创buildArray of Model对象Array of Model 。我意识到Component可以在订阅方法中创build这个数组，但我认为如果服务做到这一点，并使其可用于Component ，将是更清洁。如何可以创build一个新的Observable ，包含该数组，并返回？

如何使用量angular器来检查一个元素是否可见？: 我试图testing一个元素是否可见使用量angular器。以下是元素的样子： <i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i> 在Chrome控制台中，我可以使用这个jQueryselect器来testing元素是否可见： $('[ng-show=saving].icon-spin') [ <i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i> ] > $('[ng-show=saving].icon-spin:visible') [] 但是，当我尝试在量angular器中执行相同的操作时，运行时出现此错误： InvalidElementStateError: invalid element state: Failed to execute 'querySelectorAll' on 'Document': '[ng-show=saving].icon-spin:visible' is not a valid selector. 为什么这是无效的？如何使用量angular器检查可视性？

Angular2教程（Tour of Heroes）：无法find模块'angular2-in-memory-web-api': 我遵循教程。在Http章节中更改app/maint.ts ，通过命令行启动应用程序时出现错误： app / main.ts（5,51）：错误TS2307：找不到模块'angular2-in-memory-web-api'。（Visual Studio Code在main.ts中给我提供了同样的错误 – 红色波浪下划线。）这是我的systemjs.config.js ： /** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': […]