Angular2 rc5>组件没有被加载
Angular2 rc5> component does not get loaded
我最近从RC4转到了Angular2 RC5。从那以后,我遇到了一些问题。我不确定这些问题是我的过错还是过渡。我的app组件是这样的:
import {Component, OnInit} from "@angular/core";
import {SetLocationService} from "./auth/set-location.service";
@Component({
selector : "my-app",
template: `
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
`
})
export class AppComponent implements OnInit{
constructor(
private _setLocationService : SetLocationService
){}
ngOnInit() {
this._setLocationService.setLocation();
}
}
路由:import {Routes, RouterModule} from '@angular/router';
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {LoginComponent} from "./auth/login.component";
import {SignupComponent} from "./auth/signup.component";
import {LogoutComponent} from "./auth/logout.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {ProfileComponent} from "./auth/profile.component"
import {AccountComponent} from "./auth/account.component"
const appRoutes: Routes = [
{path : '', component: SearchBoxComponent},
{path : 'login', component: LoginComponent},
{path : 'signup', component: SignupComponent},
{path : 'logout', component: LogoutComponent},
{path : 'profile', component: ProfileComponent},
{path : 'account', component: AccountComponent},
{path : 'user/:uname', component: SearchBoxComponent},
{path : 'recover-password', component: RecoverPasswordComponent},
{path : 'search/:params', component: SearchResultComponent},
{path : '**', component : SearchBoxComponent}
];
export const routing = RouterModule.forRoot(appRoutes);
app module:
// @Modules -> Modules
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {NgModule} from '@angular/core';
// import {RouterModule} from '@angular/router';
// @Routes -> routes
import {routing} from "./app.routes";
// @Components - > Components
import {AccountComponent} from "./auth/account.component";
import {AppComponent} from './app.component';
import {ChatBoxComponent} from "./chat/chat-box.component";
import {ChatBoxDirective} from "./chat/chat-box.directive";
import {FooterComponent} from "./layout/footer.component";
import {HeaderComponent} from "./layout/header.component";
import {LoginComponent} from "./auth/login.component";
import {LogoutComponent} from "./auth/logout.component";
import {ProfileComponent} from "./auth/profile.component";
import {RecoverPasswordComponent} from "./auth/recover-password.component";
import {SearchBoxComponent} from "./search/searchBox.component";
import {SearchResultComponent} from "./search/search-result.component";
import {SignupComponent} from "./auth/signup.component";
// @providers - > services
import {AuthService} from "./auth/auth.service";
import {SetLocationService} from "./auth/set-location.service";
import {SearchService} from "./search/search.service";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
declarations: [
AccountComponent,
AppComponent,
ChatBoxComponent,
ChatBoxDirective,
FooterComponent,
HeaderComponent,
LoginComponent,
LogoutComponent,
ProfileComponent,
RecoverPasswordComponent,
SearchBoxComponent,
SearchResultComponent,
SignupComponent
],
providers : [
AuthService,
SetLocationService,
SearchService,
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [
AppComponent,
HeaderComponent,
FooterComponent
]
})
export class AppModule {}
我的第一个问题是,如果我不加1。HeaderComponent 2。在app.module的bootstrap中没有FooterComponent。当根路由处于活动状态(localhost:3000)时,HeaderComponent (2.FooterComponent)会被加载,而SearchBoxComponent (2.FooterComponent)会被加载。我有点困惑,因为我没有在官方文档中看到在bootstrap中添加多个组件。
我的第二个问题几乎和第一个一样。如果我像下面的代码一样在另一个组件中嵌入一个组件(seachboxcomponent),则不会加载seachboxcomponent组件,而是加载其他部分。
@Component({
selector: "search-result",
template : `
<seachBox></searchBox>
<div class="tag_list">
<p *ngFor = "let tag of result.obj.tags" class = "tag-li" >
<a [routerLink] = "['/search', tag]" (click) = "onSearchCliked($event, tag)"> {{tag}} </a>
</p>
</div>
`
})
我想知道,有没有人可以帮助我,我已经在这个问题上工作了几天,但我仍然被困在这里
确保声明组件的模块导出了组件。否则,其他试图使用该组件的组件将不可见。
我建议为离散的关注点创建单独的模块,如搜索、注册、聊天等,并按照下面的模式共享它们的组件。
我注意到,当使用的组件不在作用域中时,Angular2会无声地失败。你会在模板中添加一个组件,它不会渲染,没有错误。在RC5之前,这通常意味着您没有在指令[]数组中指定所需的组件。在RC5中,这可能意味着您不会从声明它的模块导出组件和/或在想要使用它的模块中导入它。
fooomodule声明并导出FooComponent,将其暴露给其他组件(可能在其他模块中)使用:
@NgModule({
declarations: [FooComponent],
imports: [BrowserModule, FormsModule],
exports: [FooComponent]
})
export class FooModule {}
FooComponent:
@Component({
selector: 'foo',
template: `FOO`
})
export class FooComponent {}
BarModule导入fooomodule,获得对它公开的组件(即FooComponent)的访问权:
@NgModule({
declarations: [BarComponent],
imports: [FooModule, FormsModule],
exports: [BarComponent]
})
export class BarModule {}
BarComponent可以访问FooComponent并在模板中使用它:
@Component({
selector: 'bar',
template: `<foo></foo>BAR`
})
export class BarComponent {}
我也有各种各样的问题迁移到RC5,但只有AppComponent应该在你的引导。如果你只能通过路由器访问某个组件,那么该组件就不应该出现在declarations中。但是该组件应该使用导出默认类ComponentName。
我解决这个问题的方法是注释掉所有内容,然后一次一个地添加组件和服务。
谢谢大家的帮助。最后,我解决了这个问题。实际上,我在HeaderComponent和FooterComponenet中包含了ROUTER_DIRECTIVES。这些都是冲突发生的地方。这是因为"RouterModule"隐式地提供了ROUTER_DIRECTIVES。因此,我们不必在任何组件中再次包含该指令。我删除了这个指令,修复了我的问题后,几乎一个星期后。我还必须根据文档改变老式的routerLike样式。
@Alex Sartan:非常感谢你解释问题的细节。我解决了这个问题,而没有为离散的关注点创建单独的模块。但是最好把所有的关注点分开。谢谢你的帮助。
- 如何创建带有插槽的vue js组件预加载程序
- 加载器组件仅加载一次
- 如何在ReactJs中渲染子组件时重新加载子组件的数据
- 加载服务器端渲染的React组件后执行脚本
- 在reactjs组件中预加载数据
- 在foreach中加载所有项后,Knockoutjs组件回调
- ReactJS-在加载时渲染顶级组件
- 如何在reactjs中动态加载组件
- 使用ReactJS动态加载组件
- 卸载/销毁角延迟加载组件
- 使用VueJS动态加载组件和模板
- 淘汰赛3.2-'如果'基于AMD加载组件之间的转换
- 存储提取的数据,以避免每次重新加载组件时提取数据
- 使用ocLazyLoad插件加载组件和其他依赖项
- ReactJS: '类型未定义'加载组件时
- React-Native:加载组件时在后台运行一个函数
- 当改变url参数时,React路由器不会重新加载组件
- noflo:动态组件加载-组件[name]与基础[path]不可用
- ReactJS:在模态中动态加载组件的最佳方式
- JavaScript,只在需要时才加载组件/调用方法