Javascript 隐藏多条管线上的某些组件5

当某些路由匹配时，我试图隐藏一个组件，我让它使用一个路由，但如果我使用多个路由，它就不起作用

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    template:  `
    <app-header *ngIf="!_router.url.includes('account', 'admin', 'app')"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="!_router.url.includes('app', 'account', 'admin')"></app-footer>
`
})
export class RootComponent {
    router: string;

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

谢谢使用indexOf（）。下面的hasMatches（）方法能够处理任意数量的参数

HTML

TS

routeUrl:字符串；
建造师(
公用路由器：路由器
) {
//订阅路由器事件以始终获取当前url
this.\u router.events.subscribe（（）=>this.routeUrl=this.\u router.url）；
}
私有hasMatches（…值：字符串[]）：布尔值{
让matchFound：布尔值=false；
//首先检查是否为null或未定义
如果（this.routeUrl）{
对于（i=0；i-1）{
matchFound=true；
打破
}
}        
}
返回匹配发现；
}

使用indexOf（）。下面的hasMatches（）方法能够处理任意数量的参数

HTML

TS

routeUrl:字符串；
建造师(
公用路由器：路由器
) {
//订阅路由器事件以始终获取当前url
this.\u router.events.subscribe（（）=>this.routeUrl=this.\u router.url）；
}
私有hasMatches（…值：字符串[]）：布尔值{
让matchFound：布尔值=false；
//首先检查是否为null或未定义
如果（this.routeUrl）{
对于（i=0；i-1）{
matchFound=true；
打破
}
}        
}
返回匹配发现；
}

Im getting indexOf在router类型上不存在，但router应该是字符串吗？字段“url”是否有toString（）方法？请你检查一下，好吗？对不起，你的权利，我不小心注释掉了router=string；完美的你的编辑对我来说没有问题，添加的订阅确实是我没有看到的缺少的和平！干得好我只是稍微调整了一下你评论的措辞，如果你同意的话。我切换了null-/undefined检查和for循环的顺序。这样，如果路由器为空或未定义，您将永远不会进入循环。-听到我能帮助你，我很高兴。：）变量“router:string”应重命名为“routeUrl:string”，以便易于理解（更新答案以匹配）Im getting indexOf在类型routerBut上不存在，但router应该是字符串吗？字段“url”是否有toString（）方法？请你检查一下，好吗？对不起，你的权利，我不小心注释掉了router=string；完美的你的编辑对我来说没有问题，添加的订阅确实是我没有看到的缺少的和平！干得好我只是稍微调整了一下你评论的措辞，如果你同意的话。我切换了null-/undefined检查和for循环的顺序。这样，如果路由器为空或未定义，您将永远不会进入循环。-听到我能帮助你，我很高兴。：）变量“router:string”应重命名为“routeUrl:string”，以便于理解（更新答案以匹配）

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    template:  `
        <app-header *ngIf="!hasMatches('app', 'account', 'admin')"></app-header>
        <router-outlet></router-outlet>
        <app-footer *ngIf="!hasMatches('account', 'admin', 'app')"></app-footer>
    `
})
export class RootComponent {
    router: string;

    constructor(
        public _router: Router
    ) {
        this.hasMatches();
        this.router = _router.url;
    }

    private hasMatches(...values: string[]): boolean {
        let matchFound = false;

        for (let i = 0; i < values.length; i++) {
            if (this.router.indexOf(values[i]) > -1) {
                matchFound = true;
                break;
            }
        }

        return matchFound;
    }

    // isPage(): boolean {
    //     const re = /^\/(account|admin|app)$/;
    //     return !re.test(this.router.url);
    // }
}

<app-header *ngIf="!hasMatches('account', 'admin', 'app')"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="!hasMatches('app', 'account', 'admin')"></app-footer>

routeUrl: string;

constructor(
    public _router: Router
) {
    // subscribe to the router events in order to always get the current url
    this._router.events.subscribe(() => this.routeUrl = this._router.url ); 
}

private hasMatches(...values: string[]): boolean {
    let matchFound: boolean = false;

    // check for null or undefined first
    if(this.routeUrl){ 
        for (i=0; i<values.length; i++){
             if(this.routeUrl.indexOf(values[i]) > -1){
                matchFound = true;
                break;
             }
        }        
    }

    return matchFound;
}