Question

我试图仅在一条路线中隐藏标题。

假设我有3条路线，public class BackgroundWorker extends Worker { @NonNull @Override public Result doWork() { Log.d("MyBackgroundWorker", "BackgroundWorker is Running"); return Result.SUCCESS; } }，route1和route2。

我有一个名为route3的组件。

我希望在用户进入app-header时隐藏组件app-header，并在其他2条路线中显示该组件。

我在这里找到了一些关于stackoverflow的主题，但是没有一个对我有帮助= /

你们能帮我一些忙吗？

这是我的代码：

app.component.ts

route1

app.component.html

export class AppComponent implements OnInit {
    showHeader = true;

    constructor(
        private router: Router
    ) {
        this.router.events.subscribe(event => this.modifyHeader(event));
    }

    ngOnInit() {
    }

    modifyHeader(location) { // This method is called many times
        console.log(location.url); // This prints a loot of routes on console
        if (location.url === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }
}

我正在使用角度<app-header *ngIf="showHeader"></app-header> <router-outlet></router-outlet>

Answer 1

由于您知道要检测的路由，并且似乎已经在应用程序组件中找到了解决方案，因此建议您过滤路由器事件，如下所示：

export class AppComponent implements OnInit {
    showHeader = true;

    constructor(
        private router: Router
    ) {
        this.router.events.pipe(
            filter(e => e instanceOf NavigationEnd)
        ).subscribe(event => this.modifyHeader(event));
    }

    ngOnInit() {
    }

    modifyHeader(location) { // This method is called many times
        console.log(location.url); // This prints a loot of routes on console
        if (location.url === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }
}

Answer 2

在路由器插座上添加功能

<router-outlet  (activate)="modifyHeader()"></router-outlet>

在您的构造函数中

router; 
constructor(private _router: Router ) {
      this.router = _router;
    }

您的ModifyHeader函数

modifyHeader() { // This method is called many times
        console.log(this.router.ur); // This prints a loot of routes on console
        if (this.router.ur === '/route1') {
            this.showHeader = false;
        } else {
            this.showHeader = true;
        }
    }

让我知道您是否遇到任何问题。

隐藏指定路线上的标头-角度6

2 个答案: