Question

我在angular 5中实现了一个创建我的foo对象的组件，它运行正常，但之后我想编辑它，所以我将编辑路径指向同一个组件：

const routes: Routes = [
  ...
  { path: 'foo/new', component: NewFooComponent },
  { path: 'foo/edit/:id', component: NewFooComponent },
  ...
];

我的问题是如何知道NewFooComponent.ts foo/new路径或foo/edit/:id中的#include <iostream> #include <limits> using namespace std; // not in real code plz int main() { cout << "largest int is " << numeric_limits<int>::max() << '\n'; cout << "largest double is " << numeric_limits<double>::max() << '\n'; return 0; }？

这也是最好的方法吗？

Answer 1

我要做的是将new或edit设置为参数并使用ActivatedRoute检查参数

所以我将按如下方式设置路线：

const routes: Routes = [
  ...
  { path: 'foo/:state', component: NewFooComponent },
  { path: 'foo/:state/:id', component: NewFooComponent },
  ...
];

并执行检查

constructor(public activatedRoute: ActivatedRoute) { }

ngOnInit() {
    this.activatedRoute.params.subscribe(
      params => {
        if(params['state'] === 'new') { ... } 
        else {...}
      }
    );
}

Answer 2

使用ActivatedRoute获取路由器参数导航ID路径中存在id属性

constructor(private route:ActivatedRoute){} 

ngOnInit(){
    // 'id' is the name of the route parameter
    if (this.route.snapshot.params['id']) { .... };
    else { ... }
}

Answer 3

我认为这是一个糟糕的设计决定，您的NewFooComponent现在正在创建和编辑某些内容，并且违反了SRP，因此您可能应该为编辑创建专用组件并共享模板如果这是重复，你试图避免只创建一个组件。

以角度创建和编辑操作

3 个答案: