如果我们在手机浏览器中看到如下标签,有两个按钮【分页控件】(第一个在右侧,另一个在左侧)
<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 项目更新为 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 项目(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) 我想通过一个简单的例子来了解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) 要设置地图缩放级别包括所有的位置标记,我已经尝试了两种选择,如建议这个职位。
这是我所做的:
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)