Question

嘿，我有两个标题组件header.component和header-home.component，所以当你在主页上看到header-home时，你不能看到header现在在我的标题中组件我已经设置了一个.active类，它在选定的nav项下面添加下划线，该项在nav页面上的header.component之间有效，但在点击时则不行nav中header-home的{{1}}将我转到现在有header的页面

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, Event, NavigationStart } from '@angular/router';
import { NgIf } from '@angular/common';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  routeHidden = true;

  title = 'app';

  constructor(private router: Router)
  {}

  ngOnInit() {
    this.router.events.subscribe( (e) => {
      if (e instanceof NavigationStart) {
        if (e.url === '/') {
          this.routeHidden = false;
        } else {
          this.routeHidden = true;
        }
      }
    });
  }
}

app.component.html

<app-header *ngIf="routeHidden"></app-header>
<app-header-home *ngIf="!routeHidden"></app-header-home>
<router-outlet></router-outlet>
<app-footer></app-footer>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { NgStyle } from '@angular/common';
declare var jquery: any;
declare var $: any;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  title: any;
  image: any;

  constructor(
  ) { }

  ngOnInit() {
    $('.hamburger').click(function(){
      $('.hamburger').toggleClass('is-active');
      $('.mobile-nav_ul').toggleClass('mobile-nav_ul_active');
    });

    $('.mobile-nav_ul').click(function(){
      $('.hamburger').toggleClass('is-active');
      $('.mobile-nav_ul').toggleClass('mobile-nav_ul_active');
    });

    $('ul li').on('click', function() {
      $('li').removeClass('active');
      $(this).addClass('active');
    });
  }

基本上有一种方法我可以在header-home.component中抓取点击事件，然后将.active类应用到我在nav <中点击的header.component项目/ p>

任何帮助将不胜感激！

路线改变时的触发事件Angular 4

0 个答案: