angular4 引入自定义组件样式丢失怎么解决

自定义导航组件

@Component({
    moduleId: module.id,
    selector: 'snail-member-detail',
    templateUrl: './page-shopping.component.html',
    styleUrls: ['page-shopping.component.css'],
    encapsulation: ViewEncapsulation.None//去掉对应Component打包出来的css作用域，引入自定义组件才能有样式效果
})

组件模板文件

组件模板文件：

    

        会员
        >
        {{memberDetail.name}}
    
    

        
  概要  
    
    

        
消费记录
    
    

        
余额流水
    
    

        
次卡记录
    
    

        
购物卡
    
    

        
优惠券
    
    

        
短信记录
    
    

        
等级变更记录
    

引入组件说明：在Module 层需要引入该组件（MemberNavComponent），不然引入无效

引入后，需要配置父子组件的传参操作，以及界面效果的展示效果，跳转等操作，都放到子组件进行处理。

---

• 
  会员
  >
  {{memberDetail.name}}
  


• 
  
    概要  
  
  


• 
  
  消费记录
  
  


• 
  
  余额流水
  
  


• 
  
  次卡记录
  
  


• 
  
  购物卡
  
  


• 
  
  优惠券
  
  


• 
  
  短信记录
  
  


• 
  
  等级变更记录
  
  

留存代码：2019-11-26

import {Component, Input, ViewEncapsulation} from '@angular/core'
import {ApiRequest} from '../../app.api-config';
import {CookieService} from 'angular2-cookie/services/cookies.service';
import {CommonService} from '../../app-common.service';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
    selector: 'snail-showcase-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.css'],

})
export class MemberNavComponent {
    constructor(private _api: ApiRequest,
                private _cookie: CookieService,
                private _commonService: CommonService,
                private _activedRoute: ActivatedRoute,
                private _router: Router,) {
    }

    //memberId: any; //会员id

    @Input() memberId: any  ////会员id
    @Input() memberName: any  ////会员id
    nowBox: string = '';//当前选中哪个选项卡

    jumpPage(url): any{
        //  cost 消费记录 ，store 充值余额 ， count 次卡充值记录
        if(url && url !='detail'){
            let path = `/member/page/${url}`
            this._router.navigate([path, this.memberId])
        } else {
            this._router.navigate(['member/detail', this.memberId])
        }

    }

    /*ngAfterViewInit() {
        //debugger
        localStorage.setItem('nowBox',url)
        setTimeout(()=>{
            this.nowBox = localStorage.nowBox //当前选中哪个选项卡
        },200)
    }*/

}


/*
* @zxyuns 使用说明备注
* 1.引入该组件 
* 2.需要多配置一个会员名字的参数 memberId: any; //会员id memberName: string = ''; //会员name
* 3.在父组件中 加入：encapsulation: ViewEncapsulation.None//去掉对应Component打包出来的css作用域，引入自定义组件才能有样式效果
*
* */