Question

您好我正在学习角度，我对组件有疑问。我有两个组件，一个根，另一个。当我从root到另一个时，我将从根控制器中看到内容。看起来像angular创建子组件，使子组件保持父母的内容。但是如何显示一个全新的模板呢？这是我的两个控制器。我还可以验证从html页面创建的第二个组件是在根组件的部分下创建的。

这是根控制器。

市场data.component.ts

import { Component, OnInit, Inject } from "@angular/core";
import { MarketDataService } from "./market-data.service";
import { CoinMarketCapTokenEntity } from "../entity/coinmarketcaptoken-entity";

@Component({
    selector: "app-market-data",
    templateUrl: "./src/app/market-data.component.html"
})
export class MarketDataComponent implements OnInit {
    private _marketDataService: MarketDataService;
    private tokens: any;

    constructor(marketDataService: MarketDataService) {
        this._marketDataService = marketDataService;
    }

    ngOnInit() {
        /*this._marketDataService.getCoinMarketCapTokens()
            .subscribe(res => this.tokens = res);*/
        this.tokens = [
            {
                symbol: "BTC"
            },
            {
                symbol: "ETH"
            }
        ];
    }
}

市场data.component.html

<table class="table table-sm table-hover">
    <thead>
        <tr>
            <th scope="col">Symbol</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let token of tokens">
            <td>
                <a [routerLink]="['/marketData', token.symbol]">
                    {{ token.symbol }}
                </a>
            </td>
        </tr>
    </tbody>
</table>
<router-outlet></router-outlet>

这是第二个（子）组件

kline.component.ts

import { Component, Input, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MarketDataService } from "./market-data.service";

@Component({
    selector: "app-kline",
    template: `
        <section *ngIf="currentSymbol">
            <h2>You selected: {{ currentSymbol }}</h2>
        </section>

        <!-- New Button Here -->
        <button (click)="goToMarketDataList()">Back to Market Data List</button>
    `
})
export class KLineComponent implements OnInit, OnDestroy {
    private marketDataService: MarketDataService;
    private route: ActivatedRoute;
    private router: Router;
    private sub: any;

    // bind symbol here
    @Input() currentSymbol: string;

    constructor(marketDataService: MarketDataService,
                route: ActivatedRoute,
                router: Router) {
        this.marketDataService = marketDataService;
        this.route = route;
        this.router = router;
    }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            let symbol = params["market"];
            //this.currentSymbol = this.marketDataService.getToken(symbol).symbol;
            this.currentSymbol = "BTC";
        });
    }

    ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    goToMarketDataList() {
        let link = ["/"];
        this.router.navigate(link);
    }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";

import { MarketDataComponent } from "./app/market-data.component";
import { MarketDataService } from "./app/market-data.service";
import { KLineComponent } from "./app/kline.component";

import { appRouterModule } from "./app.routes";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule,
        appRouterModule
    ],
    declarations: [
        MarketDataComponent,
        KLineComponent
    ],
    bootstrap: [
        MarketDataComponent
    ],
    providers: [
        MarketDataService
    ]
})
export class AppModule {}

路由配置是否有帮助。

app.routes.ts

import { Routes, RouterModule } from "@angular/router";
import { MarketDataComponent } from "./app/market-data.component";
import { KLineComponent } from "./app/kline.component";

const routes: Routes = [
    {
        path: "marketData/:market",
        component: KLineComponent
    }
];

export const appRouterModule = RouterModule.forRoot(routes);

Answer 1

这是因为您的根组件中有<router-outlet>。通过路由呈现的所有组件都将加载到<router-outlet>。

中

你应该做的是，只将<router-outlet></router-outlet>放在根组件的模板中，比如AppComponent，并为MarketDataComponent创建一个不同的组件，并为它添加一个路由。

您可以添加默认路线，例如：

{
    path: "",
    component: MarketDataComponent
},
{
    path: "marketData/:market",
    component: KLineComponent
}

所以，默认情况下，当没有路由但只有＆＃34; /＆＃34;时，MarketDataComponent将首先加载到AppComponent的路由器出口，并在导航到KLineComponent后，它将被加载到AppComponent的router-outlet再次替换了MArketDataComponent。

角度组件 - 如何避免嵌套组件

1 个答案: