在Angular中，多组件页面的设计可以通过以下步骤来实现：

1. 创建组件：根据页面的功能和结构，创建相应的组件。可以使用Angular CLI命令ng generate component component-name来生成组件。

2. 定义路由：在app-routing.module.ts文件中，定义路由来导航到不同的组件。例如，创建一个名为home的组件和一个名为about的组件：

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 在模板中使用路由导航：在需要导航到其他组件的地方，使用routerLink指令来创建导航链接。例如，在导航栏中导航到主页和关于页面：

4. 在组件中嵌入其他组件：在需要嵌入其他组件的组件模板中，使用组件选择器来嵌入其他组件。例如，在home.component.html中嵌入一个名为banner的组件：

5. 数据共享和通信：可以使用服务来共享数据和进行组件之间的通信。创建一个名为data.service.ts的服务，并在需要共享数据的组件中注入该服务。示例代码如下：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  sharedData: string;

  constructor() { }
}

在一个组件中设置共享数据：

import { Component } from '@angular/core';
import { DataService } from '../data.service';

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

      
      
    
  `
})
export class HomeComponent {
  sharedData: string;

  constructor(private dataService: DataService) { }

  updateSharedData() {
    this.dataService.sharedData = this.sharedData;
  }
}

在另一个组件中获取共享数据：

import { Component } from '@angular/core';
import { DataService } from '../data.service';

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

      
{{ sharedData }}
    
  `
})
export class AboutComponent {
  sharedData: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.sharedData = this.dataService.sharedData;
  }
}

以上是一个基本的Angular多组件页面设计的示例，你可以根据具体需求进行调整和扩展。