ngOnInit在每次更改路由时都会被调用

Question

我有一个控制器实现了OnInit。问题在于，每当我更改路由并返回到相同的组件时，OnInit都会被调用。我做错了什么，我无法理解。请帮助我。

@Component({
    selector:'test-list',
    templateUrl:'./testlist.component.html',
    styles:[`.testname{
        text-transform : capitalize;
    }`]
})
export class TestListComponent implements OnInit{
    testList:Array<Test>;
    constructor(private testService:TestService,private router:Router){}
    ngOnInit(){
        this.testService.getTest()
        .subscribe(
            data=>this.testList = <Array<Test>>data,
            error=>alert(error)
        );
        console.log("ngInit")
    }
    editTest = (id)=>{
        this.router.navigate(['createtest',id]);
    }
}

- Vikram Singh

---

我不确定我是否理解了你的问题，但这是预期的行为吗？你更改路由，然后返回组件是TestListComponent的一个新实例，因此预计会调用OnInit()。 - penleychan

我认为我们回答得很好了...“每次调用组件时都是一个新实例”。 - penleychan

我认为Vikram在这里有些困惑。@12seconds的最后回复是针对当TestListComponent被创建时，它应该只被调用一次，而不是每次我们返回到同一个组件时都被调用。我说得对吗？而不是每次我们改变路由时都会创建组件吗？。 - Aakash Thakur

在 testService.getTest() 中，你是否将 Response 映射为一个 JSON 负载 as Array<Test>？<Array<Test>>data ... 外部的 <> 是必要的吗？如果你的返回类型是我建议的这样，this.testList = data 就足够了。 - JGFMK

我不知道这是否对Vikram有所帮助，但可以这样考虑一下：假设你的组件从父组件中以不同的数据/ID调用了两次，那么你就需要为每组数据创建两个实例。如果ID 1有2个子级，ID2有3个子级，则呈现方式将会不同。一个组件也可以是其他组件的容器。 - JGFMK

Answer 1

ngOnInit() 在每次组件加载时都会执行。它不需要被调用。这是一个生命周期钩子，用于执行初始操作。您可以在这里了解更多关于Angular生命周期钩子的信息。

- Todor

Answer 2

如果在构造函数中订阅了活动路由，每次路由器导航到该页面时都会调用ngInit。

constructor(
    private route: ActivatedRoute,
    private router: Router
) {
    this.route.queryParams.subscribe(async (params) => {
        if (this.router.getCurrentNavigation().extras.state) {
            // TODO save the params
        }
    });
}

ngOnInit(){
    console.log('ngOnInit called');
} 

- Vivens Ndatinya