以下是Angular2+可视化组件层次结构和模板层次结构的解决方法，包含代码示例：

1. 确定组件层次结构： 在Angular中，组件层次结构可以通过组件之间的父子关系来实现。在组件层次结构中，父组件可以包含一个或多个子组件。子组件可以通过在父组件的模板中使用组件标签来引用。

示例代码：

父组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
Parent Component
    
  `
})
export class ParentComponent { }

子组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
Child Component
  `
})
export class ChildComponent { }

在上面的示例中，父组件（ParentComponent）包含一个子组件（ChildComponent）。父组件的模板中使用了来引用子组件。

2. 确定模板层次结构： 在Angular中，模板层次结构可以通过组件模板中的嵌套和引用来实现。在模板层次结构中，一个模板可以包含其他模板。

示例代码：

父模板：

Parent Template

  
Child Template

子模板：

Another Template

在上面的示例中，父模板中使用了来定义一个子模板（childTemplate）。子模板没有使用组件，而是直接在父模板中定义。

3. 结合组件和模板层次结构： 在实际应用中，可以将组件层次结构和模板层次结构结合起来，以构建复杂的可视化组件结构。

示例代码：

父组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    
Parent Component
    
    
      
Child Template
    
  `
})
export class ParentComponent { }

子组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    
Child Component
    
  `
})
export class ChildComponent {
  constructor(private parentComponent: ParentComponent) { }

  get childTemplate() {
    return this.parentComponent.childTemplate;
  }
}

在上面的示例中，父组件中定义了一个子组件（ChildComponent）和一个子模板（childTemplate）。子组件中通过使用*ngTemplateOutlet指令来引用父组件的子模板。

以上就是使用Angular2+构建可视化组件层次结构和模板层次结构的解决方法，包含代码示例。