Angular 6-如何重构这些控件的代码

// 原始组件
@Component({
  selector: 'app-complex-component',
  templateUrl: './complex-component.component.html',
  styleUrls: ['./complex-component.component.css']
})
export class ComplexComponent {
  // 大量逻辑代码
}

// 重构后的组件
@Component({
  selector: 'app-complex-component',
  templateUrl: './complex-component.component.html',
  styleUrls: ['./complex-component.component.css']
})
export class ComplexComponent {
  constructor(private subComponentService: SubComponentService) {}

  // 调用子组件的方法
  someMethod() {
    this.subComponentService.doSomething();
  }
}

// 新建的子组件服务
@Injectable({
  providedIn: 'root'
})
export class SubComponentService {
  doSomething() {
    // 原组件中的逻辑代码
  }
}

// 原始模板
<div *ngIf="user$ | async as user">
  <p>{{ user.name }}</p>
  <p>{{ user.age | ageFilter }}</p>
  <!-- 更多复杂逻辑 -->
</div>

// 重构后的模板
<app-user-info [user]="user$ | async"></app-user-info>

// 新建的子组件
@Component({
  selector: 'app-user-info',
  template: `
    <p>{{ user.name }}</p>
    <p>{{ user.age | ageFilter }}</p>
    <!-- 更多逻辑 -->
  `
})
export class UserInfoComponent {
  @Input() user: any;
}