我正在尝试在Angular 2中创建两个单独的组件,它们彼此之间没有关系,因此它们没有嵌套。一个组件是Users
,另一个是Clients
。
我要做的是分别称为它们,main.ts
用作主要入口点,在那里引导两个组件,然后在中调用它们index.html
。
我的问题是:
1-我是否可以不依赖于主入口点,而是直接index.html
像角度1或2中的指令那样直接调用它们,而必须依赖于主入口组件?
2-有更好的方法来引导多个控制器吗?
这是plunkr:http ://plnkr.co/edit/fm70cmcWOSFrEKyRx4GF
我的config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
我的客户
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
directives: []
})
export class Clients {
constructor() {
this.name = 'Angular2'
}
}
我的users.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'users',
providers: [],
template: `
<div>
<h2>Hello second component</h2>
</div>
`,
directives: []
})
export class Users {
constructor() {
this.name = 'Angular2'
}
}
我的主要
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {Clients} from './clients';
import {Users} from './users';
bootstrap(Clients, [])
.catch(err => console.error(err));
bootstrap(Users, [])
.catch(err => console.error(err));
我的index.html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
<users></users>
</body>
</html>
实际上,您可以将几个组件引导到HTML条目文件中,但是它们将与具有单独注入器的两个不同应用程序相对应,即,您不能使用依赖项注入中另一个应用程序的元素。
您会注意到,有一个基于替代方法的提供程序使用useValue并在两个应用程序之外显式创建其实例。
您需要每个应用程序都有一个主要组件。该组件将用于引导该应用程序。该组件的选择器将用于将应用程序附加到HTML条目文件中。
请注意,您可以引导多个组件,但不能两次引导同一组件。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句