Angular技术问题：同一按钮同时使用(click)与routerLink是否符合最佳实践？

Great question! Let’s break down your options clearly—this is a super common scenario in Angular development, so it’s smart to get this right early on.

第一种写法的问题与潜在副作用 #

Your initial approach of binding both (click) and routerLink directly on the button does have meaningful drawbacks, and yes, it can lead to unexpected behavior:

• Uncontrolled execution order: Angular doesn’t guarantee the order in which the click event handler and routerLink directive run. While your saveToService() is synchronous right now, you might get lucky and have it execute first—but this isn’t a reliable assumption. If you ever update the save logic to be asynchronous (like calling an API), you’ll almost certainly end up navigating away before the data is saved.
• Poor maintainability: Mixing multiple independent actions in the template violates the separation of concerns principle. Templates should focus on presentation and triggering actions, not holding business logic. When someone else (or future you) looks at the button, it’s harder to immediately grasp that clicking it does two related things.

第二种写法：推荐的最佳实践 #

Your alternative approach—wrapping both actions into a single saveAndNavigate() method in your component class—is absolutely the standard, recommended way to handle this in Angular. Here’s why it’s better:

1. Controlled execution flow: You explicitly ensure that data is saved to the service before triggering the route navigation. No guesswork about order, and it’s trivial to adjust if you need to add async logic later (like waiting for an API call to resolve).
2. Cleaner separation of concerns: All business logic lives in the component class, where it’s easier to debug, modify, and test. The template stays lean, just pointing to a single method that represents the full user action ("save and go to next page").
3. Better testability: Component methods are straightforward to unit test—you can verify that calling saveAndNavigate() both invokes the service’s setData method and triggers the router navigation.

Example of a robust implementation (even for async cases) #

If your save operation ever becomes asynchronous, this pattern scales perfectly:

async saveAndNavigate(): Promise<void> {
  try {
    await this.service.saveDataAsync(this.formData); // Wait for async save to complete
    this.router.navigate(['/link']);
  } catch (error) {
    // Handle save failure (show error message, prevent navigation)
    console.error('Failed to save data:', error);
  }
}

Final Verdict #

Stick with the single-method approach. It’s the industry standard for Angular, eliminates potential race conditions, and keeps your codebase organized and maintainable.

内容的提问来源于stack exchange，提问作者Renate