我已经成功地将 Angular 2（Alpha 44）与 D3.js 集成：
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script>
System.config({packages: {'app': {defaultExtension: 'js'}}});
System.import('app/app');
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
应用程序.js：
/// <reference path="./../../typings/tsd.d.ts" />
import {Component, bootstrap, ElementRef} from 'angular2/angular2';
@Component({
selector: 'my-app',
template: '<h1>D3.js Integrated if background is yellow</h1>',
providers: [ElementRef]
})
class AppComponent {
elementRef: ElementRef;
constructor(elementRef: ElementRef) {
this.elementRef = elementRef;
}
afterViewInit(){
console.log("afterViewInit() called");
d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow");
}
}
bootstrap(AppComponent);
一切正常。但是 Angular 2 文档ElementRef说明如下： …
我正在尝试将auth0与我的angular2应用程序集成,但我得到一个错误说:
EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0BrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389(anonymous function) @ core.umd.js:9890ZoneDelegate.invoke @ zone.js:332onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:331Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365onInvokeTask @ core.umd.js:9236ZoneDelegate.invokeTask @ zone.js:364Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
platform-browser.umd.js:937
platform-browser.umd.js:937 Error: DI Exception
at NoProviderError.BaseException [as constructor] (core.umd.js:4472)
at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:4602)
at new NoProviderError (core.umd.js:4638)
at ReflectiveInjector_._throwOrNull (core.umd.js:6532)
at ReflectiveInjector_._getByKeyDefault (core.umd.js:6560)
at ReflectiveInjector_._getByKey (core.umd.js:6523)
at ReflectiveInjector_.get (core.umd.js:6332)
at NgModuleInjector.get (core.umd.js:10386)
at DebugAppView._View_AppComponent_Host0.createInternal (AppComponent.ngfactory.js:20)
at …我有2个组件,一个是a Topbar,第二个是Display这里它们是:
显示:
import {Component, View, NgIf} from 'angular2/angular2';
import {Topbar} from '../topbar/topbar';
@Component({
selector: 'display'
})
@View({
templateUrl: './components/display/display.html',
styleUrls: ['./components/display/display.css'],
directives: [Topbar, NgIf]
})
export class Display {
showGrid: boolean;
constructor(){
this.showGrid = true;
}
}
显示HTML(对我的问题很重要):
<topbar></topbar>
<div *ng-if="showGrid" class="display-list">
<h1>true</h1>
</div>
<div *ng-if="showGrid == false" class="display-list">
<h1>false</h1>
</div>
如你所见,我有一个if语句取决于showGrid属性.现在这是我的Topbar组件:
顶栏:
import {Component, View} from 'angular2/angular2';
import {ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selector: 'topbar'
})
@View({
templateUrl: './components/topbar/topbar.html',
styleUrls: ['./components/topbar/topbar.css'],
directives: [ROUTER_DIRECTIVES]
}) …我创建了一个简单的指令，它包含在一个表单中，只有几个 md-input 和一个md-select.
我现在在几页中使用了我的指令，一切正常，但现在我想在一个 md-dialog它没有按预期工作，如果我在它外面单击，我将无法关闭 md-select-menu ，即使我专注于 md 输入。
因此，用户关闭菜单的唯一两种方法是选择一个选项或关闭对话框。
这还不错，但我发现这很烦人。
这是对话框的内容：
<md-dialog aria-label="Modal" ng-cloak flex="75">
<md-toolbar ng-class="md-primary">
<div class="md-toolbar-tools">
<h2 translate>personModal.update</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/ic_close_white.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<person-form person="person"></person-form>
</md-dialog>
和指令内容：
<form name="createPersonForm" layout="row" layout-align="space-between center" class="bg-sec query-fields">
<md-input-container flex class="full-width-input">
<label translate>createPerson.form.firstname</label>
<input name="firstname" ng-model="person.firstname" required md-asterisk/>
<div ng-messages="createPersonForm.firstname.$error"
ng-show="createPersonForm.firstname.$touched">
<div ng-message="required" translate>
createPersonForm.errors.firstnameMissing
</div>
</div>
</md-input-container>
<!-- -->
<!-- Other md-inputs here -->
<!-- -->
<md-input-container flex class="consumption-filter …