Angular2 Routing：它创建一个相关组件的实例是什么意思？

2023年2月23日 266次阅读

我正在教自己Angular2和我正在看的文字说：

The router locates or creates an instance of the component associated with the route, and that component’s view is displayed in the location defined by the RouterOutlet directive.

代码示例：

import { Component } from 'angular2/core';
import {ProductListComponent} from './products/product-list.component';
import {ProductService} from './products/product.service';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import 'rxjs/Rx'; //Load all features
import {WelcomeComponent} from './home/welcome.component'
@Component({
    selector: 'pm-app',
    template:`
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a [routerLink]="['Welcome']">Home</a></li>
                    <li><a [routerLink]="['Products']">Product List</a></li>
                </ul>
            </div>
        </nav>
        <div class='container'>
            <router-outlet></router-outlet>
        </div>
    </div>`,
    directives: [ROUTER_DIRECTIVES],
    providers: [ProductService, HTTP_PROVIDERS, ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
    {path: '/products', name: 'Products', component: ProductListComponent}
])
export class AppComponent {
    pageTitle: string = "Acme Product Management";
}

问题是：我可以看到定位部分,但它是什么意思,它创建了一个相关组件的实例？它只是{},如果是,那么在关联的RouterOutlet指令中会显示什么？

最佳答案 您有RouteConfig注释,它包含两个配置对象：

{path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },
{path: '/products', name: 'Products', component: ProductListComponent}

例如,该对象中的每个对象都有自己的路径/ welcome和关联组件WelcomeComponent.

如果你要去/欢迎位置,与此路径组件关联的角度放置 – 欢迎组件位于< router-outlet>< / router-outlet>的地方指令包含在html中.

结果我们在某个特定的地方用自己的html和逻辑注入了Component.

点赞