Question

我正在学习Angular 2（rc.4）所以请耐心等待。我有一个需要存储用户信息的应用程序。因此，当用户第一次运行应用程序时，应根据config.json文件中的数据显示特定组件。

目前我这样做是这样的：

AppComponent

<div *ngIf="!data.user">
  <first-run-component
</div>

<div *ngIf="data.user">
  <main-component></main-component>
</div>

export class AppComponent implements OnInit{
 public data;

 constructor(private userDataService : UserDataService){}    

 ngOnInit(){
  this.getUserData();
 }

 getUserData(){
     this.userDataService.getUserData()
                     .subscribe(
                      data => this.data =data);
 }
}

现在在UserDataService中我只返回带有http.get的observable，但是这是异步发生的，所以我想知道这是否是正确的方法？

这很好用，我们会看到第一次运行的组件（如果数据已经存在于文件中，则显示主要组件），用户输入他的信息并显示主要组件。

最佳方法是什么？如何在角度2中设计此类应用的结构？

Answer 1

我猜你需要一台路由器来完成这项工作。

当您使用RC4时，您不必设置和配置RC5 NgModule。注意，语法可能不一样。

了解路由器

以下是教程的链接，以便您了解其工作原理：https://angular.io/docs/ts/latest/guide/router.html。

这里是指南的链接，可以了解整个事情并提供所需内容：https://angular.io/docs/ts/latest/guide/router.html

基本上，路由器使用路由器插座。它是基于特定Url路由呈现组件的位置。假设你有以下结构（没有任何* ngIf或任何东西）：

<first-run-component></first-run-component>
<router-outlet></router-outlet>

您的首次运行组件将始终加载，然后您的路由器插座可以加载链接到特定路由的任何组件。请考虑以下路由：

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes', component: HeroListComponent }
];

然后，您可以通过告知路由器导航到这两个路由中的任何一个来切换这两个组件，而您的第一个组件也将始终存在。

要完全回答您的问题，我会使用包含单个路由器插座的组件，然后根据“data.user”管理要选择的路由。

你需要：

创建包含路由器可能路由的app.routes.ts文件。
在bootstrap（）时使路径可用于整个应用程序。
管理案例以了解何时根据您的user.data导航到组件。

小心不要迷失在文档中显示的NgModules配置（特定于RC5的示例：）

export const routing = RouterModule.forRoot（appRoutes）;

此外，如果路径包含特定的URL，您可以通过重定向到组件来管理（如果需要）默认组件加载：

export const LoginRoutes: Routes = [
    // if Url is empty after http://localhost:8000/ redirect to http://localhost:8000/login
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    // if http://localhost:8000/login => load LoginComponent
    { path: 'login', component: LoginComponent },
    // if http://localhost:8000/recup => load RecupComponent 
    { path: 'recup', component: RecupComponent }
];

另外，如果您需要在组件中使用路由器，请不要忘记使用依赖注入：

import { Router, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    templateUrl: 'XXX',
    styleUrls: ['XXX'
    ],
    directives: [
        ROUTER_DIRECTIVES
    ]
})

...

constructor(public authService: AuthService, public router: Router) {

}

您将能够像这样导航（例如，使用服务提供完整示例）：

login(username, password) {
    // Service that manages the authenticated state
    this.authService.login(username, password)
        .subscribe(() => {
            // Call the service
            if (this.authService.isLoggedIn) {
                // Redirect the user to master component
                this.router.navigate(['/master/accueil']); // Using a second <router-outlet> to manage a different route
            }
        });
}

希望这会有所帮助。不过我的建议是，你应该升级到RC5。

如果应用程序是第一次在Angular 2中运行，则显示一个组件？

1 个答案:

了解路由器