javascript - Angular 4 Error when using Directives

[ad_1]

I have the following directive declaration:

import 
 Directive,
 Input,
 OnInit,
 TemplateRef,
 ViewContainerRef
 from '@angular/core';

import UserService from './services/user.service';

 @Directive( selector: '[appShowAuthed]' )
 export class ShowAuthedDirective implements OnInit 

 condition: boolean;
 constructor(
 private templateRef: TemplateRef<any>,
 private userService: UserService,
 private viewContainer: ViewContainerRef
 ) 
 ngOnInit() 
 this.userService.isAuthenticated.subscribe(
 (isAuthenticated) => 
 );
 

 @Input() set showAuthed(condition: boolean) 
 this.condition = condition;
 
 

And I have defined it in the declarations of my NgModule as below:

import CommonModule from '@angular/common';
import NgModule from '@angular/core';
import FormsModule, ReactiveFormsModule from '@angular/forms';
import HttpModule from '@angular/http';
import RouterModule from '@angular/router';
import ListErrorsComponent from './list-errors.component';
import ShowAuthedDirective from './show-authed.directive';

@NgModule(
 imports: [
 CommonModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 RouterModule
 ],
 declarations: [
 ListErrorsComponent,
 ShowAuthedDirective,
 ],
 exports: [
 CommonModule,
 FormsModule,
 ListErrorsComponent,
 ReactiveFormsModule,
 HttpModule,
 RouterModule,
 ShowAuthedDirective
 ]
)
export class SharedModule 

But when I use it in my html component as below:

<nav class="navbar navbar-light">
 <div class="container">
 <a class="navbar-brand" routerLink="/">plant-simulator</a>

 <!-- Show this for logged out users -->
 <ul *appShowAuthed="false"
 class="nav navbar-nav pull-xs-right">

 <li class="nav-item">
 <a class="nav-link"
 routerLink="/register"
 routerLinkActive="active">
 Sign Up
 </a>
 </li>

 </ul>
 <ul *appShowAuthed="true"
 class="nav navbar-nav pull-xs-right">
 <!-- Show this for logged in users -->
 <li class="nav-item">
 <a class="nav-link"
 [routerLink]="['/profile', currentUser.id]"
 routerLinkActive="active">
 <img [src]="currentUser.image" *ngIf="currentUser.image" class="user-pic" />
 currentUser.email 
 </a>
 </li>
 </ul>

 </div>
</nav>

I get some errors as can be seen in the screen shot below:

Any clues as to why it is complaining about parsing?

[ad_2]

لینک منبع