如何包含多个组件，然后从一个组件到另一个组件调用一个函数？
如何包含多个组件，然后从一个组件到另一个组件调用一个函数？
提问于 2015-11-04 09:34:26
所以，我对AngularJS 2还是很陌生的，有一些问题我一直无法找到明确的在线答案。
我的第一个问题是，如何在angular2应用程序中包含多个组件？这就是我目前的做法，但我认为我做错了。此外，你能看看我是如何包括一项服务吗？
bootstrap.ts
// DEPENDENCIES GO HERE
bootstrap(App,[
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);app.ts
// DEPENDENCIES GO HERE
import {Socket} from './services/socket.ts'; // Socket.io Service
import {Second} from './pages/secondComponent.ts';
@Component({
selector: 'main-component'
})
@View({
templateUrl: '/views/template.html',
directives: [Second]
})
@RouteConfig([
new Route({path: '/', component: Home, as: 'Home'}),
new Route({path: '/home', component: Home, as: 'Home'})
])
export class App {
router: Router;
location: Location;
socket: Socket;
constructor(router: Router, location: Location) {
this.router = router;
this.location = location;
this.socket = new Socket(); // <-- Is this how to use a "service"? I'm sure this is wrong as I would need to create a new socket instance every time I wanted to use it? Singleton?
}
}secondComponent.ts
// DEPENDENCIES GO HERE
@Component({
selector: 'second-component'
})
@View({
templateUrl: '/views/second.html'
})
export class Second {
constructor() {
}
public callme() {
return "I work!";
}
}如果我将第二个组件作为指令包含在app.ts文件中的@视图中，那么它将加载，但我认为这是错误的，因为它是一个组件，而不是一个指令。
最后，如何从secondComponent.ts文件调用app.ts文件中的"callme()“函数？
var second = new Second();
second.callme() 工作，但不确定这是否正确，因为我认为它再次实例化了组件？
谢谢你的帮助。
干杯!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-04 12:06:47
我的第一个问题是，如何在angular2应用程序中包含多个组件？
// Note that @View is optional
// see https://github.com/angular/angular/pull/4566
@Component({
directives : [Cmp1, Cmp2, Cmp3, Cmp4, CmpN]
})
// Or
@Component({})
@View({
directives : [Cmp1, Cmp2, Cmp3, Cmp4, CmpN]
})关于如何注入Services。它比这简单得多(angular2为您创建实例，不需要new ;)
@Component({
selector: 'main-component',
providers : [Socket] // <-- Inject it into the component
})
export class App {
socket: Socket;
constructor(socketSvc: Socket) { // <-- Get the instance created above
this.socket = socketSvc;
}
}您可以在viewProviders下看到一个例子。
如果我将第二个组件作为指令包含在app.ts文件中的@视图中，那么它将加载，但我认为这是错误的，因为它是一个组件，而不是一个指令。
通过directives属性包含组件绝对没有什么问题，事实上，这就是您如何做到的，也是组件从指令扩展。
最后，如何从secondComponent.ts文件调用app.ts文件中的"callme()“函数？
您只需查询应用程序的子级
export class App implements AfterViewInit {
// Assuming you have only one 'Second' child, if you have multiple you must use @ViewChildren
@ViewChild(Second) second: QueryList<Second>;
afterViewInit() {
this.second.callMe();
}
}我建议您通过教程，您错过了上面提到的一些基本步骤。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33518237
复制相关文章
相似问题
腾讯云开发者
