对于重构Angular 6中的控件代码，以下是一些解决方法的示例：

1. 使用组件进行代码重用：
   • 创建一个可重用的组件，包含需要在多个地方使用的控件代码。
   • 将重复的代码从各个组件中提取出来，并将其放入可重用的组件中。
   • 在需要使用这些控件的组件中，引入并使用可重用组件。

// reusable.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-reusable',
  template: `
    
    Submit
  `
})
export class ReusableComponent { }

// usage.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-usage',
  template: `
    
Usage Component
    
  `
})
export class UsageComponent { }

2. 使用指令进行代码重用：
   • 创建一个可重用的指令，包含需要在多个地方使用的控件代码。
   • 将重复的代码从各个组件中提取出来，并将其放入可重用的指令中。
   • 在需要使用这些控件的组件的模板中，使用指令来应用控件代码。

// reusable.directive.ts
import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appReusable]'
})
export class ReusableDirective {
  constructor(
    private templateRef: TemplateRef,
    private viewContainerRef: ViewContainerRef
  ) {
    this.viewContainerRef.createEmbeddedView(this.templateRef);
  }
}

// usage.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-usage',
  template: `
    
Usage Component
    

      
      Submit
    
  `
})
export class UsageComponent { }

这些示例演示了如何使用组件和指令来重构Angular 6中的控件代码。您可以根据自己的需求和场景选择适合的方法进行重构。