Question

我感到非常沮丧的是，我无法在Angular2中发送可重用指令的可见性。

1）我有一个登录页面

我想发送导航栏的可见性。当我在登录页面上然后不可见然后当我登录然后可见。

$('form').on('keypress', function(event) {
    console.log(event);
    if (event.keyCode === 13) {
        event.preventDefault();
        form.reset();
        return false;
    }
})

在我的app.component.ts中，我有以下设置;这工作，导航栏不可见。如果在true和false之间切换它是有效的，所以我知道@Component({ selector: 'my-app', template: ` <navbar [visible]="isLoggedIn"></navbar> <div class="container"> <router-outlet></router-outlet> </div>`, directives: [NavbarComponent,ROUTER_DIRECTIVES] })它可以工作。

app.component

在我的登录页面中，我设置了可见性，但它不起作用。

如何与导航栏组件交谈以说出＆＃34;我现在需要更改您的可见性，因为我已登录。我已将您添加为提供商＆＃34;。下面我设置this.isLoggedIn = true;登录但仍然隐藏。

  isLoggedIn=false;

这是我的navbar.compoment.ts

import { Component } from '@angular/core';
import { Router, ROUTER_DIRECTIVES } from '@angular/router';
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
import { Http, Headers } from '@angular/http';
import { contentHeaders } from '../common/headers';
import {NavbarComponent} from '../navbar/navbar.component';

@Component({
  selector: 'login',
  directives: [ NavbarComponent,ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ],
  templateUrl: 'app/login/login.component.html',
  styles: [ 'app/login/login.component.css' ]
})
export class LoginComponent {
  constructor(public router: Router, public http: Http) {
  }


  //visibility: hidden;

  public isLoggedIn: boolean = false;


  login(event: any, username: string, password: string) {
    event.preventDefault();
    let body = JSON.stringify({ username, password });
    this.http.post('http://127.0.0.1:8050/auth', body, { headers: contentHeaders })
      .subscribe(
        response => {
          localStorage.setItem('id_token', response.json().access_token);
          console.log(response.json().access_token);
          console.log(this.isLoggedIn);
          this.isLoggedIn = true;
          console.log(this.isLoggedIn);
          this.router.navigate(['/home']);
        },
        error => {
          alert(error.text());
          console.log(error.text());
        }
      );
  } 

  signup(event: any) {
    event.preventDefault();
    this.router.navigate(['/signup']);
  }
}

这是我的navbar.html

import {Component, Input} from '@angular/core';
import { Http, Headers } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { CORE_DIRECTIVES,Location } from '@angular/common';
import {ROUTER_DIRECTIVES, Router,ActivatedRoute} from '@angular/router';

@Component({
    selector: 'navbar',
    templateUrl: 'app/navbar/navbar.component.html',
    directives: [ROUTER_DIRECTIVES]

})
export class NavbarComponent { 


    @Input() visible = true;

    //constructor(private _router: Router){}

    jwt: string;
    decodedJwt: string;
    response: string;
    api: string;
    //jwt_decode:any;
    constructor(private _loc:Location,private route: ActivatedRoute,
                public router: Router, public http: Http, public authHttp: AuthHttp) {
        this.jwt = localStorage.getItem('id_token');
        //this.decodedJwt = this.jwt && window.jwt_decode (this.jwt);
    }


   logout() {
        localStorage.removeItem('id_token');
        this.router.navigate(['/login']);
   }




}

Answer 1

尝试：

<navbar [hidden]="!isLoggedIn"></navbar>

没有visible html attribute。

Angular2指令可见性

1 个答案: