angular 组件 - 如何避免嵌套组件

Question

嗨，我正在学习 angular，我有一个关于组件的问题。我有两个组件，一个是根，一个是其他。当我从根转到另一个时，我将看到根控制器的内容。看起来 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
}

所以，默认情况下，当没有路由只有“/”时，MarketDataComponent会先加载到AppComponent的router-outlet，导航到KLineComponent后，再加载到AppComponent的router-outlet AppComponent 再次替换了 MArketDataComponent。

angular 组件 - 如何避免嵌套组件

angular component - how to avoid having nested components

angular-template

angular-components

angular