Angular 如何在ANGLING v17中使用鞋带样式组件

发布于01月31日

我还是个新手，这是我的第一个项目，所以这个过程可能是显而易见的.我按照Shoelace Angular Integration英里的速度走了几步，但我无法让它运转起来.我注意到在npmjs.com也有一个可用的包，但我不想依赖它，因为它看起来可能会被放弃，并适用于v14.

我如何使用我在本教程之后创建的AppModule呢？我也读过类似的问题，但我无法修复它.

我try 将schemas: [CUSTOM_ELEMENTS_SCHEMA]添加到我的组件中，但我遇到了相同的错误，这真的很令人困惑.

我如何在不进入依赖地狱的情况下导入它？

以下是我得到的信息:

X [ERROR] NG8001: 'app-drawer-example' is not a known element:
1. If 'app-drawer-example' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-drawer-example' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

    src/app/app.component.html:5:0:
      5 │ <app-drawer-example></app-drawer-example>
        ╵ ~~~~~~~~~~~~~~~~~~~~

  Error occurs in the template of component AppComponent.

    src/app/app.component.ts:11:15:
      11 │   templateUrl: './app.component.html',
         ╵                ~~~~~~~~~~~~~~~~~~~~~~


X [ERROR] NG8001: 'sl-drawer' is not a known element:
1. If 'sl-drawer' is an Angular component, then verify that it is part of this module.
2. If 'sl-drawer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler] 

    src/app/app.component.ts:21:79:
      21 │ ...r</button><sl-drawer #drawer label="Drawer" class="drawer-focus...
         ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

import 'zone.js'; import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import '@shoelace-style/shoelace/dist/shoelace.js'; @Component({ selector: 'my-app', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: ` <div> <sl-tree selection="multiple"> <sl-tree-item expanded [selected]="treeItem.selected" (click)="treeItem.selected = true"> <sl-icon [name]="treeItem.iconId"></sl-icon> {{treeItem.label}} <sl-button size="small" (click)="onAddToContainer(treeItem, $event)"> <sl-icon name="plus"></sl-icon> button </sl-button> <sl-tree-item>test</sl-tree-item> </sl-tree-item> </sl-tree> </div> `, }) export class App { name = 'Angular'; treeItem = { selected: false, label: 'test', iconId: 'github', }; onAddToContainer(treeItem, e) { e.stopPropagation(); alert(treeItem); } } bootstrapApplication(App);

<html> <head> <title>My app</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/themes/light.css" /> </head> <body> <my-app>Loading...</my-app> </body> </html>

Angular 如何在ANGLING v17中使用鞋带样式组件

推荐答案

Angular相关问答推荐

如何将CDkDropList与Angular FormArray和FormGroup一起使用？

间歇性不正确的SSR重定向(server. ts级别的请求和响应不匹配)

TransLoco合并本地和服务器端转换对象

Angular：将服务注入非独立组件导致应用程序中断

Angular 17：延迟加载带参数的独立组件？

懒惰加载角404路径

ANGLING：ExpressionChangedAfterChecked在嵌套形式中由子项添加验证器

对Angular 为17的路径使用AuthGuard

Angular 17+独立配置中main.ts bootstrap 调用的最佳实践

Angular 16模块中未使用的组件是否从Bundle 包中删除(树摇动)？

如何在Angular功能路由保护中取消订阅RxJs主题

错误：服务或构建Angular 项目时模块构建失败

显示 1 个数据而不是所有 ngFor - Angular 11

如何在 Angular 中将tailwind 类传递给 fontawesome

Angular keypress 存储空间而不是第一个字母

如何为所有模块全局声明指令？

如何在angular 5的组件中格式化日期

取消订阅服务中的http observable

获取从(keypress)angular2按下的键

MatToolbar 与 Angular 9 一起使用时抛出错误