Как выполнить событие Onclick в строке меню primeNG - PullRequest
Новая
       6

Как выполнить событие Onclick в строке меню primeNG

0 голосов
/ 07 ноября 2018

Как выполнить событие On-click с помощью PrimeNG.

Когда мы нажимаем на строку меню New, чтобы получить страницу UserFormComponent.html для добавления нового пользователя. Используя PrimeNG, как мы можем это сделать.

Мой код доступен по адресу: https://stackblitz.com/edit/angular-rlf3nz appcomponent.html 

<p-menubar [model]="items">

appcomponent.ts 

export class AppComponent {
  private user = new User();  //Newly added  
  constructor(private _userService:UserService) { }  //Newly added

  title = 'clientApp';
  private items: MenuItem[];

  ngOnInit() {
    this.items = [
    {
      label: 'Quotes',
      items: [
        { label: 'New ', icon: 'fa fa-refresh',  command: () => this.addNewUser()},
        { label: 'Show All', icon: 'fa fa-repeat', url: '#' }             
      ]
    }

   addNewUser(){
      this.user=this._userService.getter();
   }

}

это мой UserFormComponent.html 

<div class="container">
  <form (ngSubmit)="processForm()">      
      <div class="form group">
        <label for="username">User Name</label>
        <input type="text" name="username" class="form-control" [(ngModel)]="user.username">
      </div>
      <div class="form group">
          <label for="type">Type</label>
          <input type="text" name="type" class="form-control" [(ngModel)]="user.type">
      </div>

      <div class="form group">
        <label for="modelname">Model Name</label>
        <input type="text" name="modelname" class="form-control" [(ngModel)]="user.modelname">
      </div> 
            <input type="submit" value="save" class="btn btn-success">
  </form>
</div>

это мой UserFormComponent.ts 

export class UserFormComponent implements OnInit {
  private user:User;
  constructor(private _userService:UserService,private _router:Router) {

   }

  ngOnInit() {
  this.user=this._userService.getter();
  }

  processForm(){
    if(this.user.id==undefined){
       this._userService.createUser(this.user).subscribe((user)=>{
         console.log(user);
         this._router.navigate(['/']);
       },(error)=>{
         console.log(error);
       });
    }else{
       this._userService.updateUser(this.user).subscribe((user)=>{
         console.log(user);
         this._router.navigate(['/']);
       },(error)=>{
         console.log(error);
       });
    }
  }

1 Ответ

0 голосов
/ 07 ноября 2018

Вы можете использовать command для вызова функции.

ц 

ngOnInit() {
    this.items = [
    {
      label: 'Quotes',
      items: [
        { label: 'New ', 
           icon: 'fa fa-refresh', 
           command: () => addNewUser(),
           //routerLink:"/demo"  <-- this can be moved inside the addNewUser function.
        },
        { label: 'Show All', icon: 'fa fa-repeat', url: '#' }             
      ]
    }

//Add new user
addNewUser(){
   this.user=this._userService.getter();
   this.user = new User()
}
...