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

Question

I am using @angular/cli: 1.0.1

Problem

I am trying to add css class in my child component from parent component. I'm using @input in parent component and provide a css class . I am not getting value from parent component. Below is my parent component code. What I'm doing wrong?

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>

Below is my child component code where I'am willing to get the class name.

Navbar Component 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

You should use @Input in you child component. This annotation marks fields which this component receives 'from outside' itself.

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

Use @Input in your child component

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)
  }    
}