标签: angular-cdk
角材料5暗色主题不适用于身体
我创建了一个“自定义”主题，（使用位于https://material.angular.io/guide/theming的主题文档，这很糟糕），如下所示：
@import '~@angular/material/theming';
@include mat-core();
$ip-primary: mat-palette($mat-indigo);
$ip-accent: mat-palette($mat-pink, A200, A100, A400);
$ip-theme: mat-light-theme($ip-primary, $ip-accent);
$ip-theme-dark: mat-dark-theme($ip-primary, $ip-accent);
.indigo-pink {
@include angular-material-theme($ip-theme);
}
.indigo-pink-dark {
@include angular-material-theme($ip-theme-dark);
}
我的index.html包含以下内容：
<body class="mat-app-background mat-typography">
<app-root></app-root>
</body>
在app-root组件的容器中，我使用以下方法在自定义类名（indigo-pink和indigo-pink-dark）之间切换：
<div [ngClass]="appTheme">
我还使用以下方法将CDK覆盖容器类设置为我的自定义类名称：
setContainerClass(className: string): void {
const containerClassToKeep = 'cdk-overlay-container';
const overlayClassList = this.overlayContainer.getContainerElement().classList;
const existingClasses = Array.from(overlayClassList);
existingClasses.forEach(classToken => {
if (classToken !== containerClassToKeep) {
overlayClassList.remove(classToken);
}
});
overlayClassList.add(className);
}
主要问题是，当我切换到深色主题时，确实看到indigo-pink-dark类名已正确添加到我的应用程序组件容器中，但是只有一些样式发生了变化（例如，顶部的工具栏变暗，而Material组件）-主体页面保持白色。主题指南（和其他博客文章）说，使用mat-app-background应该可以解决此确切问题。 …
推荐指数
解决办法
查看次数
如何更新 mat-tree 以处理将子节点添加到叶节点（将叶节点转换为父节点）
我正在使用带有复选框的Angular Material6 Tree 组件。
angular-material angular-material2 angular angular-material-5 angular-cdk
推荐指数
解决办法
查看次数
@angular/cdk/overlay 全局和居中位置不起作用
我正在尝试使用新的 @angular/cdk 但位置策略似乎不起作用，只想显示一个以背景为中心的模态，我知道我可以为窗格设置一个类并在那里设置固定位置，但是，在这种情况下，我不知道positionStrategy配置是什么，我希望尽可能适合@angular/cdk功能。
这里是示例：https://stackblitz.com/edit/angular-9nthad?file=src% 2Fapp%2Fhello.component.ts
推荐指数
解决办法
查看次数
如何根据页面偏移量将 Angular CDK Overlay 组件保留在页面内
我正在我的图书馆Contexr上工作。我只是重构了我的应用程序以使用 Angular CDK Overlay 来显示上下文菜单，因此我不必再在实际应用程序中包含某些组件（少一个安装步骤）。
我曾经使用FlexibleConnectedPositionStrategy在元素下方创建一个下拉列表，该下拉列表将保留在页面内。此位置策略的创建类似于使用 ElementRef：
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(elementRef)
.left(state.left + 'px')
.top(state.top + 'px');
问题是我没有 ElementRef 可供参考。我的覆盖应该灵活地连接到我的 .left() 和 .top()。有没有办法用 FlexibleConnectedPositionStrategy 做到这一点？目前我正在尝试使用 GlobalPositionStrategy，但这并没有考虑到屏幕外的元素。
打开覆盖层的类：
@Injectable({
providedIn: 'root'
})
export class ContextMenuService {
private overlayRef: OverlayRef;
constructor(private overlay: Overlay, private injector: Injector) {}
public open(state: ContextState) {
const overlayConfig = this.getOverlayConfig(state);
this.overlayRef = this.overlay.create(overlayConfig);
const contextMenuRef = new ContextMenuOverlayRef(this.overlayRef);
this.attachDialogContainer(this.overlayRef, state, contextMenuRef);
}
private getOverlayConfig(state: ContextState) {
const positionStrategy = this.overlay.position()
.global()
.left(state.left …推荐指数
解决办法
查看次数
为什么 Angular Form 在 MatDialog 组件中很慢？
我在 Material Dialog 组件中有一个 Angular 表单。数据是双向绑定的，当通过输入键切换或输入输入时，会导致屏幕在 keydown 的 . 所有数据都正确传递，但在尝试使用表单时速度非常慢。
我尝试重构用于输入的表单以使用“材料表单”，但仍然具有相同的减速性能。
这是 chrome 中性能跟踪器的屏幕截图：
我的配置有问题吗？或者这是最新的 Angular 8 动画/CDK 包中可能的回归？这是我的 Angular 包依赖项：
dependencies": {
"@angular/animations": "^8.2.13",
"@angular/cdk": "^8.2.3",
"@angular/common": "~8.2.13",
"@angular/compiler": "~8.2.13",
"@angular/core": "~8.2.13",
"@angular/forms": "~8.2.13",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.13",
"@angular/platform-browser-dynamic": "~8.2.13",
"@angular/router": "~8.2.13",
}
这是调用对话框的组件方法：
public editRow(tablerow: IRule): void {
const dialogRef = this.dialog.open(EditDialogComponent, {
width: '100%',
height: '85%',
data: tablerow
});
this.subscriptions.push(
dialogRef.afterClosed().subscribe(updatedRule => {
if (updatedRule !== undefined) {
this.rules = this.rules.map(rule => rule.Id === updatedRule.Id ? updatedRule …推荐指数
解决办法
查看次数
Angular CDK：将叠加层附加到单击的元素
我正在尝试为表格单元格制作自定义弹出框，以便在单击时显示单元格详细信息，其方式类似于mdBoostrap popovers。
现在，我有以下应用程序：https : //stackblitz.com/edit/angular-m5rx6j
Popup 组件显示在主组件下，但我想将它显示在表格上方，就在我单击的元素下方。
我想我需要执行以下操作：
- 获取我单击的“td”的 ElementRef -> 我不知道如何
- 将覆盖层附加到此元素 -> 已经这样做了，但是使用根元素
推荐指数
解决办法
查看次数
滚动时垫自动完成选项下拉不会粘住
在我的 Angular 应用程序中，我使用了Angular Material的自动完成功能：
它工作正常，除非我滚动页面：
基本上下拉菜单在滚动时不会固定在它的位置，我不知道为什么。
在官方的 Material 文档页面中，它通过自动更新元素的top和left属性来很好地工作。但是，这不会发生在我的应用程序中。
推荐指数
解决办法
查看次数
Angular 9 CDK 门户错误：必须提供要附加的门户
我在处理看似简单的事情时遇到了困难。我试图在 Angular 9 中打开一个包含一些 html 的新窗口。每次运行时，我都会看到一个窗口弹出一秒钟，然后失败并抛出以下错误：
Error: Must provide a portal to attach
at throwNullPortalError (portal.js:23)
at DomPortalHost.attach (portal.js:320)
at GraphPopoutComponent.ngOnInit (graph-popout.component.ts:43)
at callHook (core.js:4686)
at callHooks (core.js:4650)
at executeInitAndCheckHooks (core.js:4591)
at refreshView (core.js:11814)
at refreshDynamicEmbeddedViews (core.js:13154)
at refreshView (core.js:11819)
at refreshComponent (core.js:13229)
在有人问之前：
- 是的，我已将 PortalModule 包含在我的 app.module.ts 中
- 角度 9.0.7
- 角度/cdk、角度/材料 9.1.3
- 我确实有嵌套模块，这会导致 PortalModule 出现问题吗？
这是我的代码供参考：
graph.component.html
.
.
.
<app-graph-popout *ngIf="openPortal">
<h1>IT WORKS</h1>
</app-graph-popout>
图.组件.ts
.
.
.
togglePortal() {
this.openPortal = true;
}
graph-popout.component.ts
@Component({
selector: 'app-graph-popout', …推荐指数
解决办法
查看次数
如何从 cdkPortal 内的内容获取 ViewChild
我有几个带有“工具”的组件，并在创建时将这些工具插入应用程序中预定义的“命名”位置，例如左/右/侧工具栏。他们使用 Angular CDK Portals 来做到这一点。它看起来像这样：
// component template here...
// then portions of UI for portals, like this:
<ng-template cdkPortal #leftToolbar>
<app-search-input #search (search)="onSearch($event)"></app-search-input>
</ng-template>
app-search-input我的目标是以某种方式获取对放置在门户内的组件的引用。
如下所示不起作用，this.searchEl始终是undefined：
// component class
@ViewChild('search', {static: true}) searchEl: SearchInputComponent;
伙计们有什么想法吗？
推荐指数
解决办法
查看次数
角CDK的OverlayModule，cdk-overlay-pane不会将位置设置为绝对值吗？
我正在使用Angular CDK的Overlay模块。我只是找不到添加位置的方法：叠加层的绝对位置？该模块将接收top和的left位置，该位置与所连接元素的位置匹配，但是覆盖层将不接收position: absolute。由于ViewEncapsulation，我无法添加绝对位置。我真的很努力寻找解决方案。
问题：
如何使用cdkOverlayOrigin和cdkConnectedOverlayOrigin
模块：
import { OverlayModule } from '@angular/cdk/overlay';
@NgModule({
imports: [
OverlayModule,
],
declarations: [ MenuComponent ],
})
export class MenuModule {
}
零件：
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: [ './menu.component.scss' ],
})
export class MenuComponent {
}
模板：
<div style="margin: 0 auto; width: 30%">
<h1 cdkOverlayOrigin
#checkListTrigger="cdkOverlayOrigin"
(click)="checkListOpen = !checkListOpen"
style="background: blue">Overlay Origin</h1>
<ng-template
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="checkListTrigger"
[cdkConnectedOverlayOpen]="checkListOpen">
<ng-container>
<p>Why you no positioned on h1 element</p> …推荐指数
解决办法
查看次数