小编Wan*_*lle的帖子
Angular 2/4 - routerLinkActive无法正常工作
我的routerLinkActive有问题.
这是两个GIF解释.
- 第一个问题:当我启动应用程序时,routerLinkActive都没有激活该类.但如果我点击不同的路线,那最终会有效.
- 当我首先点击当前路线时,不显示该类.
这是我的代码:
<ul class="nav">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
<a [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ul>
这是我路线的树.(红色称为组件)
和我的路线代码:
import ...
const routes : Routes = [
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
{
path: 'dashboard',
component: DashboardComponent
}, ..., {
path: 'challenges',
component: ImageRankComponent
}, {
path: 'niveau',
component: LevelComponent
}, {
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
providers: [
{
provide: LocationStrategy,
useClass: …推荐指数
解决办法
查看次数
Firebase - Firestore - 使用collection.add()获取密钥
我正面临来自Firebase的新Firestore的问题.
情况:我有一个collection('room')
我创造了房间 collection('room').add(room)
我正在尝试做什么:我需要更新一个房间.
为此,我使用: collection('room').doc(ROOM_ID).update(update)
所以我需要在我的集合中的文档中添加ROOM_ID:
|room
ROOM_ID
id:ROOM_ID,
someContent: ForTheQuery
有可能实现这一目标吗？
另一种方法是使用以下命令创建自己生成的ID:
collection('room')
.doc(someId)
.set({
id: someId,
someContent: ForTheQuery
});
但我想避免它.
推荐指数
解决办法
查看次数
NativeScript Angular - 在点击事件上获取 X 和 Y
我正在做一个 Nativescript-Angular-App，但遇到了问题。
用户必须单击图片上的正确位置。
我不明白如何获取简单点击的坐标。
我可以通过触摸手势（TouchGestureEventData）获取坐标，但它提供了信息流。我只想要一个数据。
- GestureEventData 没有 GetX() 方法。
- TouchGestureEventData 有 GetX() 方法，但我只想要第一次触摸。
我尝试过触摸：
public onTouch(args: TouchGestureEventData) {
console.log(args.getActivePointers()[0].getX());
}
但我得到了太多的数据（每个动作）。
有没有一种方法可以通过简单的点击来获取坐标？
谢谢！
推荐指数
解决办法
查看次数
Firebase - Firestore - 我会读多少时间阅读文档
通过Firebase的新Firestore,我发现我对Observables知之甚少.
我的问题如下:
我用db.collection('room')获得了一些数据.
如果我不通过订阅收听observable,我会获取文档吗？(我认同).
对于我的收藏"房间"中的每一个变化,它是否被Firestore视为"新文档阅读"？
如果我在我的应用程序中有重复的Observables返回db.collection('room'),我是否会对Firestore数据库进行X调用或只调用一次？
谢谢!
推荐指数
解决办法
查看次数
ngx-virtual-scroll 在 Angular16 更新后不起作用
ngx-virtual-scroll 在 angular16 更新后无法工作，在终端中显示一个错误。
错误是
'VirtualScrollerModule' does not appear to be an NgModule class.
This likely means that the library (ngx-virtual-scroller) which declares VirtualScrollerModule is not compatible with Angular Ivy. Check if a newer
version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
我该如何解决这个问题？
推荐指数
解决办法
查看次数
Angular 材质：在 mat-chip 右侧显示图标
我有一个垫片，里面有内容。我里面还有一个取消图标。我将 mat-chip 设置为固定宽度，因此我希望取消图标始终向右浮动。但是取消图标并未向右浮动。我尝试了多种 CSS 技术，但没有任何效果。
<mat-chip *ngIf= "item?.name">
{{ item.name}}
<mat-icon matChipRemove (click)="removeAssignments(dataItem)">cancel</mat-icon>
</mat-chip>
推荐指数
解决办法
查看次数
如何在鹅毛笔工具栏中添加自定义图标
我在我的 React Native 应用程序中使用 Quill 作为文本编辑器。我想在羽毛笔工具栏中添加自定义工具栏图标，有什么解决方案吗？我的代码是：
quill.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color:rgba(0, 0, 0, 0);
}
#editor {
height: calc(100% - 72px);
background-color:rgba(0, 0, 0, 0);
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
</head>
<body>
<div id="editor"></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"
integrity="sha512-P2W2rr8ikUPfa31PLBo5bcBQrsa+TNj8jiKadtaIrHQGMo6hQM6RdPjQYxlNguwHz8AwSQ28VkBK6kHBLgd/8g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
const quill = new Quill('#editor', window.options);
quill.on('text-change', function (delta, oldDelta, source) {
const html = document.querySelector('#editor').children[0].innerHTML; …推荐指数
解决办法
查看次数
推入角度信号阵列
语境：
有了 Angular 16，我们现在可以使用信号了。
但我似乎不清楚如何简单地推入数组。
该文档来自Angular Signal 官方文档：
当处理包含对象的信号时，直接改变该对象有时很有用。例如，如果对象是数组，您可能希望推送新值而不完全替换数组。要进行这样的内部更改，请使用 .mutate 方法
例如：
messages = signal<Message[]>([]);
ngOnInit(): void {
const newMessage = ...
this.messages.mutate(values => values.push(newMessage));
}
但两次引用该列表似乎很奇怪。第一次与this.messages，第二次与values。
问题：
如何将项目推入信号数组？
推荐指数
解决办法
查看次数
带有图像的 onLayout - React Native
我在图像中的 onLayout 有问题：
我有一个显示尺寸的功能。
measureView(event) {
console.log(event.nativeEvent.layout.width);
console.log(event.nativeEvent.layout.height);
}
这有效并向我展示了 TouchableWithoutFeedback 的尺寸
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onLayout={(event) => this.measureView(event)}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}/>
</TouchableWithoutFeedback>
但是使用图像中的 onLayout，我什么也没有，只是未定义。
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}
onLayout={(event) => this.measureView(event)}/>
</TouchableWithoutFeedback>
你有什么想法吗？
谢谢！
推荐指数
解决办法
查看次数
ExpressJS没有"Access-Control-Allow-Origin"标头到本地服务器
我知道这个主题似乎已经很多次回答了,但我真的不明白.
- 我有一个本地angular-fullstack应用程序(Express,NodeJs),它有他的 服务器A(localhost:9000 /).
- 我有另一个本地前端应用程序B(使用generator-gulp-angular完成的BlurAdmin)(localhost:3000 /)
我的服务器A是使用Express和Nodejs自动生成的:
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', false);
next();
});
在我的应用B中,对我的服务器API的GET请求有效
$http.get('http://localhost:9000/api/shows')
但是有了PUT请求:
$http.put('http://localhost:9000/api/shows/1', object)
我有以下错误:
XMLHttpRequest无法加载http:// localhost:9000/api/shows/1.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:3000 '访问.响应具有HTTP状态代码403.
我试着用:
$http({
method: "PUT",
url:'http://localhost:9000/api/shows/1',
headers: {
'Content-type': 'application/json'
},
data:object
});
不工作,
我试着用:
res.header('Access-Control-Allow-Origin', '*');
不工作,
我已经为chrome安装了*ExtensionAllow-Control-Allow-Origin:**并且没有做任何事情(只返回所有代码但只返回错误403(禁止)
我真的不知道为什么当它与GET一起使用时它不适用于PUT.
你有这个问题吗？谢谢!
更新:1浏览器中的结果: 用于GET
General:
Request URL:http://localhost:9000/api/shows/1
Request Method:OPTIONS
Status Code:200 OK
Request header: …推荐指数
解决办法
查看次数
标签 统计
angular ×5
firebase ×2
react-native ×2
angular16 ×1
cors ×1
css ×1
express ×1
http ×1
javascript ×1
nativescript ×1
node.js ×1
observable ×1
quill ×1
react-quill ×1
routerlink ×1
typescript ×1