gpt4 book ai didi

javascript - 创建单独的组件 Angular 2

转载 作者:行者123 更新时间:2023-11-29 19:15:02 26 4
gpt4 key购买 nike

我试图在 Angular 2 中创建两个独立的组件,它们彼此之间没有关系,因此它们没有嵌套。一个组件是 Users,另一个是 Clients

我做的是分别调用它们,使用 main.ts 作为主要入口点,在那里引导两个组件,然后在 index.html 中调用它们>.

我的问题是:

1- 我是否可以不依赖主入口点并直接从 index.html 调用它们,就像 angular 1 中的指令一样,或者 angular 2 你必须依赖主入口组件?

2- 有更好的方法来引导多个 Controller 吗?

这是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'
}
}
});

我的clients.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'
}
}

我的ma​​in.ts

//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 入口文件中,但它们将对应于具有独立注入(inject)器的两个不同应用程序,即您不能通过依赖注入(inject)使用另一个应用程序的元素。

您会注意到有一个变通方法基于使用 useValue 的提供者并在两个应用程序之外显式创建其实例。

每个应用程序都需要有一个主要组件。该组件将用于引导该应用程序。该组件的选择器将用于在 HTML 入口文件中附加应用程序。

请注意,您可以引导多个组件,但不能引导同一个组件两次。

关于javascript - 创建单独的组件 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35991671/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com