我有两个组成部分:家庭和管理员。在主页组件中,我可以创建,删除和编辑帖子。在管理员上,我确实完全一样,但是使用了另一个数据库集合(我正在使用FireBase)。但是我不了解这种行为:当我单击以编辑员工时,路由器导航到家中。在编辑帖子(主页)时,一切看起来都很好。这两个组件的代码实际上是相同的:
Admin.ts
user: Users[];
show = false;
employees: Users = {
id: '',
userName: '',
phone: '',
role: '',
name: '',
};
edit = false;
employeeToEdit: Users;
constructor(private userService: UsersService) {
}
ngOnInit() {
this.userService.getUsers().subscribe(data => {
this.user = data;
console.log(this.user);
});
}
addEmployee(item: Users) {
if (this.employees.userName !== "" && this.employees.phone !== "" && this.employees.role !== ""
&& this.employees.name !== "") {
this.userService.addUser(this.employees);
}else{
this.show = true;
setTimeout(function () {
this.show = false;
}.bind(this), 3000);
}
}
deleteItem(event, item: Users) {
this.clearStateE();
this.userService.deleteUser(item);
}
editEmployee(event, item: Users) {
this.edit = true;
this.employeeToEdit = item;
}
updateItem(item: Users) {
this.userService.updateUser(item);
this.clearStateE();
}
clearStateE() {
this.edit = false;
this.employeeToEdit = null;
}
HTML:
<h1>Employees</h1>
<div class="card">
<div class="card-content">
<span class="card-title">Add Item</span>
<form (ngSubmit)="addEmployee()" class="col s6">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Add Description" [(ngModel)]="employees.userName" name="description">
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Description" [(ngModel)]="employees.phone" name="description">
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Description" [(ngModel)]="employees.role" name="description">
</div>
<div *ngIf="show" class="alert alert-danger" role="alert">
All fields are requiered
</div>
</form>
</div>
</div>
<ul *ngFor="let employee of user" class="collection">
<li class="collection-item"><strong>{{employee.name}}: </strong> {{employee.phone}} <a href="#" class="secondary-content">
<i (click)="editEmployee($event, employee)" class="fa fa-pencil"></i>
<i *ngIf="edit && employeeToEdit.id == employee.id" (click)="clearStateE()" class="fa fa-compress"></i>
</a>
<div *ngIf="edit && employeeToEdit.id == employee.id">
<form (ngSubmit)="updateItem(employee)">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Add Title" [(ngModel)]="employee.name" name="title">
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Description" [(ngModel)]="employee.phone" name="description">
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Date" [(ngModel)]="employee.userName" name="description">
</div>
<input type="submit" value="Update Item" class="btn orange">
<button (click)="deleteItem($event, employee)" class="btn red">Delete Item</button>
</div>
</form>
</div>
</li>
</ul>
Routing.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AdminComponent } from './components/admin/admin.component';
const routes: Routes = [
{
path: 'admin', component: AdminComponent
},
{
path: '**',
component: HomeComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
在两个组件之间导航时发生的另一件事是,检索到的数据不再存在(仅当我插入另一个数据时才显示列表)。有人可以帮我吗?
编辑:我尝试过类似的操作,但是仍然无法正常工作
const routes: Routes = [
{
path: "admin",
component: AdminComponent
},
{
path: "**",
redirectTo: "home"
},
{
path: "home",
component: HomeComponent
}
答案 0 :(得分:1)
“编辑”按钮周围有一个<a href="#" class="secondary-content">
,与您的(click)
冲突。
实际上,#
链接将重定向到“主页”页面。