Angular2+中Model的设计与使用最佳实践及常见问题解析

Hey there! I’ve been working with Angular since v2 too, so I totally get where you’re coming from with these Model-related headaches. Let’s break down each of your questions and share practical solutions:

1. Fixing Crashes When JSON Missing Model Properties #

The main reason your app crashes is that you’re trying to access properties that don’t exist on the raw JSON object (since it’s just a plain JS object, not an instance of your Model class). Here’s how to fix it:

• Use Optional Properties or Default Values in Your Model
  Define your Model class with optional properties (using ?:) or set default values in the constructor. This way, even if the JSON skips a property, your instance will have a fallback value:

  export class User {
    id: number;
    name: string;
    // Optional property with default value
    email?: string = '';
    // Optional property without default (will be undefined)
    phone?: string;
  
    constructor(data: Partial<User>) {
      Object.assign(this, data);
    }
  }
  

  Then when you fetch data, create a Model instance instead of assigning directly:

  this.http.get<User>('/api/users/1').subscribe(data => {
    this.user = new User(data);
  });
  

• Use Optional Chaining in Templates/Code
  Even if you forget to handle it in the Model, you can prevent crashes by using the optional chain operator ?. when accessing properties:

  <!-- Won’t crash if phone is missing -->
  <p>Phone: {{ user?.phone || 'N/A' }}</p>
  

2. Does Dependency Injection (DI) Apply to Models? #

Short answer: Rarely. DI is designed for services, components, pipes, etc.—things that need to be instantiated once (singletons) or depend on other dependencies.

Models are typically just data containers. If your Model needs to perform logic that relies on a service (like formatting dates with a DateService), it’s better to move that logic to a service instead of injecting the service into the Model. Keeping Models pure data classes makes them easier to test and maintain.

That said, if you really need a Model with injected dependencies (e.g., a complex domain model with business logic), you can create a factory provider to instantiate it with DI, but this is an edge case.

3. Designing Models to Avoid Crashes When Adding New Properties #

To make your Models resilient to new properties, follow these practices:

• Use Partial<T> in Constructors
  As shown earlier, using Partial<User> in the constructor lets you pass any subset of properties, and Object.assign will merge them with the defaults. When you add a new property, just add it to the class with a default value, and existing code won’t break.

• Prefer Factory Functions Over Direct Assignment
  Create a factory function to convert JSON to Model instances. This centralizes the logic for handling missing properties and makes it easy to update when adding new fields:

  export function createUser(data: any): User {
    return {
      id: data.id,
      name: data.name,
      email: data.email || '',
      phone: data.phone,
      // New property with default
      address: data.address || { street: '', city: '' }
    } as User;
  }
  

• Consider Using Interfaces for Type Safety (With Caveats)
  If you don’t need class methods or default values, interfaces work great for type checking at compile time. But remember, interfaces don’t exist at runtime, so you still need to handle missing properties in your code (like using optional chaining).

Real-World Model Design Tips #

• Keep Models Lean: Models should primarily hold data. Put any business logic, data transformation, or validation into services (e.g., UserService that handles API calls and data cleanup).
• Use class-transformer for Complex Conversions: If you’re dealing with nested objects, date strings that need to be converted to Date objects, or snake_case JSON properties, this library can automate converting JSON to Model instances with decorators.
• Validate Data with class-validator: Pair it with class-transformer to ensure incoming JSON matches your Model’s expected structure, and handle validation errors gracefully before they cause crashes.

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