要解决Angular mat-menu出现在页面外部的问题，可以尝试以下解决方法：

1. 使用自定义位置策略： 在mat-menu中使用MatMenuTrigger指令，并使用cdkConnectedOverlayOrigin属性指定触发元素，然后使用cdkConnectedOverlay属性指定位置策略。在位置策略中，可以使用flexibleConnectedTo方法指定连接元素，然后使用偏移量来调整菜单的位置。

Open Menu

  
    

      Item 1
      Item 2
    
  

import { Component } from '@angular/core';
import { ConnectionPositionPair, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';

@Component({
  selector: 'app-menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['menu-example.css'],
})
export class MenuExample {
  positionStrategy: FlexibleConnectedPositionStrategy;

  constructor() {
    this.positionStrategy = this.createPositionStrategy();
  }

  createPositionStrategy(): FlexibleConnectedPositionStrategy {
    return this.overlay.position().flexibleConnectedTo(this.origin.elementRef)
      .withPositions([
        new ConnectionPositionPair(
          {originX: 'start', originY: 'top'},
          {overlayX: 'start', overlayY: 'top'}
        ),
      ])
      .withDefaultOffsetX(8)
      .withDefaultOffsetY(8);
  }
}

2. 使用MatMenuTrigger的menuPosition属性： 在MatMenuTrigger中使用menuPosition属性，可以指定菜单的位置，例如top、bottom、left、right等。

Open Menu

  Item 1
  Item 2

这样，菜单将出现在触发元素的下方。

请根据具体需求选择适合的解决方法，并根据需要进行调整。