创建单独的组件角度 2.
Creating Separate Components Angular 2
>我正在尝试在 Angular 2 中创建两个单独的组件,它们彼此之间没有关系,因此它们没有嵌套。一个组件是Users
,另一个是Clients
。
我所做的是单独调用它们,使用 main.ts
作为主入口点,在那里引导两个组件,然后在 index.html
中调用它们。
我的问题是:
1-我是否可以不依赖主入口点并直接从index.html
调用它们,就像角度1中的指令或角度2中的指令一样,您必须依赖主入口组件?
2-有更好的方法来引导多个控制器吗?
这是 plunkr:http://plnkr.co/edit/fm70cmcWOSFrEKyRx4GF
我的配置.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'
}
}
我的用户.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));
我的索引.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 条目文件中附加应用程序。
请注意,您可以引导多个组件,但不能引导同一组件两次。
相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- 在单独的ul's
- Javascript排序的图像弹出窗口..可以't单独弹出
- React组件等待所需道具进行渲染
- 如何将 React 组件正确存储在单独的文件中并导入 React
- 创建单独的组件角度 2.
- 将反应移动到没有 Node 的单独组件文件中
- ReactJS - 在更改单独的类属性时更新组件
- 如何在react中将单独文件中的组件链接在一起
- 扩展时钟组件的角度指令以单独显示日期时间元素
- ReactJs + Babel -使用单独的文件定义组件
- 在一个单独的文件中,在任何React组件中设置setState
- 同一页面上的多个KnockoutJs组件单独运行
- 如何更新一个单独的组件道具与阿波罗执行变异后
- React JS -当localStorage状态改变时,获得一个单独的组件来重新渲染
- 测试使用带有单独模板的另一个组件的ember组件
- 将react js组件拆分为单独的文件——并处理基于仪表板的应用程序的创建
- 如何声明React.来自外部模块的组件类型,具有单独的声明文件