想要使用父级的@input装饰器访问变量值

Question

我想使用父级的baseurl，可用于子级的进一步处理

仪表板是父级

  `<div class="layout-wrapper" [ngClass]="containerClass">
  <app-topbar></app-topbar>
   <div class="layout-main-container">
   <div class="layout-main">
     <router-outlet baseurl='MY_API_URL'></router-outlet>
    </div>
     <app-footer></app-footer>
   </div>
  <app-config></app-config>
  </div>`

我想要一个设置，因此如果将来我需要更改基本网址，我可以仅从标签更改它 为此，各个孩子的代码如下

       export class SpecimenComponent implements OnInit { @Input() baseurl = '';

Answer 1

在您希望所有子组件具有相同基本 url 的父组件中，创建一个服务，确保它没有

providedIn: 'root'

并将其添加到父组件中，如下所示

@Component({
    providers: [UrlService],
})
export class ParentComponent {
    const urlService = inject(UrlService);

    ngOnInit() {
        this.urlService.baseUrl = 'http://example.com';
    }
}

然后导入服务，确保所有子 URL 具有相同的要共享的 URL，据我所知，不可能使用

@Input

或

@Output

作为路由！

使用providers数组中的服务，我们确保该服务创建了一个新实例，因此只有父级及其子级可以访问您设置的url！