Question

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

路由器定位或创建与路由关联的组件的实例，该组件的视图显示在RouterOutlet指令定义的位置。

代码示例：

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指令中会显示什么？

Answer 1

你有RouteConfig注释，它由两个配置对象组成：

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

例如，此对象中的每个对象都有自己的路径/welcome和关联的组件WelcomeComponent。

如果您要转到/welcome位置，与此路径组件关联的角度设置 - WelcomeComponent位于html中包含<router-outlet></router-outlet>指令的位置。

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

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

1 个答案: