Question

我正在使用@ angular / cli：1.0.1

问题

我正在尝试在父组件的子组件中添加css class。我在父组件中使用@input并提供了一个css class。我没有从父组件获得价值。下面是我的父组件代码。我做错了什么？

import { Component, HostListener, Input } from '@angular/core';

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
     title = 'app works!';
     @Input('init') 
     changeClass: string;
 // Below function run when user scroll down the page
   onScroll(event) {
     let number = event.srcElement.scrollTop;
     if (number > 121) {
     this.changeClass = "navbar-fixed";
     } else if (number < 122) {
         this.changeClass = "";
     }
   }
}


<div class="ah-master-page" (scroll)="onScroll($event)">
    class="ah-top-bar">
    <div class="ah-top-bar-section1">
        <i class="fa fa-mobile fa-lg" aria-hidden="true"></i> +92 000 0000000
    </div>
    <div class="ah-top-bar-section2">
        <img src="./assets/images/hut.png" alt="">
        <span class="ah-logo-label">Reservation</span>
        <span style="font-size: 14px;position: relative;top: 
        6px;">.com</span>
    </div>
    <div class="ah-top-bar-section3">
        <i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
        <i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
        <i class="fa fa-google fa-lg" aria-hidden="true"></i>
    </div>
 </div>
 <app-navbar [changeClass] = "_class"></app-navbar>
 <div class="ah-wrapper">
    <div class="ah-component1">
    <app-login></app-login>  
 </div>
 <div class="ah-component2">
      <app-newsfeed  *ngFor="let item of createRange(5);"></app-newsfeed>
 </div>
 <div class="ah-component3">
      <app-hotfeeds></app-hotfeeds>  
 </div>

以下是我的孩子组件代码，我愿意获得班级名称。

Navbar组件HTML

<div class="ah-navbar {{_class}}">
    <ul>
      <li>
        <a href="javascript:void(0)" class="ah-active"> 
        <i class="fa fa-home" aria-hidden="true"></i>
        </a>
      </li>
      <li>
       <a href="javascript:void(0)">
        <i class="fa fa-binoculars" aria-hidden="true"></i>
        Explore Huts
       </a>
      </li>
    </ul>
</div>

Navbar Component TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  _class: string;

constructor() {
  console.log(this._class);
}
}

Answer 1

您应该在您的子组件中使用@Input。此注释标记此组件从外部接收的字段＆＃39;本身。

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent  implements OnInit {
  @Input('changeClass')
  _class: string;

  constructor() {
  }

}

Answer 2

在子组件中使用@Input

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})

export class NavbarComponent implements OnInit {
  @Input() public _class: string;

  public ngOnInit(){
      console.log(this._class)
  }    
}

angular2 @input没有将值传递给子组件

2 个答案: