小编Abo*_*zlR的帖子

在角度材料选项卡中设置水平滚动

如果我们在手机浏览器中看到如下标签,有两个按钮【分页控件】(第一个在右侧,另一个在左侧)

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

我将删除这两个按钮并使用滚动代替。

解决方法:

(步骤 1)使用以下代码删除两个按钮:

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}
Run Code Online (Sandbox Code Playgroud)

(第 2 步)将以下样式放入 style.css 中:

.mat-tab-label-container {
    display: flex;
    flex-grow: …
Run Code Online (Sandbox Code Playgroud)

angular-material angular

13
推荐指数
3
解决办法
1万
查看次数

如何在功能模块中使用独立组件、管道或指令

我将我的 Angular 项目更新为 Angular 14。现在我想要一些standalone components,,pipes或者directives

我有一个名为ProductModule的特色模块,并且希望在此模块中使用名为uppercase的独立管道。

// structure
---Product
          ---product.component
          ---product.service
          ---product.module.ts

---StandabloneFolder
                    ---uppercase.pipe.ts
Run Code Online (Sandbox Code Playgroud)

我的大写管子

@Pipe({
    name: 'uppercase',
    standalone: true,
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return "UPPERCASE_INPUT"
    }
}
Run Code Online (Sandbox Code Playgroud)

在product.component.html中

{{'Javascript Addicted' |uppercase}}
Run Code Online (Sandbox Code Playgroud)

出现以下错误:

找不到名称为“大写”的管道product.component.ts(6, 39):组件 ProductComponent 的模板中发生错误。

笔记:

standalone: true如果我添加到Product.Component并从声明数组中删除ProductComponent,这个问题就会得到解决。

angular angular14 angular-standalone-components

7
推荐指数
1
解决办法
1万
查看次数

ReferenceError:区域未定义

我想在我的 Angular 项目(Angular 8)上使用Angular Universal. 当我运行以下命令时,它将在dist名为 server 和 browser 的文件夹中创建 2 个文件夹以及另一个名为 server.js 的文件

npm run build:ssr
Run Code Online (Sandbox Code Playgroud)

然后运行以下命令

npm run serve:ssr
Run Code Online (Sandbox Code Playgroud)

我收到以下错误:

Zone.__load_patch('ZoneAwarePromise', function (global, Zone, api) { ^ ReferenceError: 区域未定义

笔记:

第一次运行命令(npm runserve:ssr)时出现以下错误

var DragEvent = window.DragEvent;
^
ReferenceError: window is not defined
Run Code Online (Sandbox Code Playgroud)

通过在 dist 文件夹中的 server.js 文件的开头添加以下代码来修复此问题

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.','browser', 
'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win; …
Run Code Online (Sandbox Code Playgroud)

angular-universal angular

6
推荐指数
1
解决办法
1万
查看次数

ES2021 (ES12) 中的 WeakRef 和终结器是什么

我想通过一个简单的例子来了解ES2021WeakRef中的什么是终结器以及在哪里使用它们。

我知道,WeakRef是一个班级。这将允许开发人员创建对对象的弱引用,而终结器或FinalizationRegistry允许您注册将在对象被垃圾收集时调用的回调函数

const myWeakRef = new WeakRef({
  name: 'Cache',
  size: 'unlimited'
})

// Log the value of "myWeakRef":
console.log(myWeakRef.deref())
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-2021

6
推荐指数
1
解决办法
1613
查看次数

AGM 地图:设置缩放级别以包括所有标记

要设置地图缩放级别包括所有的位置标记,我已经尝试了两种选择,如建议这个职位

这是我所做的:

export class LocationSelectionComponent implements OnInit, AfterViewInit {

@ViewChild('AgmMap') agmMap: AgmMap;

ngAfterViewInit() {
  console.log(this.agmMap);
  this.agmMap.mapReady.subscribe(map => {
  const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
  for (const mm of this.mapMarkers) {
    if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
      bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
     }
   }

   map.fitBounds(bounds);
  });
 }
}
Run Code Online (Sandbox Code Playgroud)

请注意, this.mapMarkers 是一个数组,其中包含地图标记的坐标。这些填充在ngOnInit().

正如上面帖子的评论中提到的,我还尝试了以下方法:

onMapReady(map: AgmMap) {
 const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
 for (const mm of this.mapMarkers) {
   if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) { …
Run Code Online (Sandbox Code Playgroud)

google-maps angular-google-maps

4
推荐指数
1
解决办法
5360
查看次数