我正在使用Angular2构建一个交互式Web应用程序,我正在寻找一种方法来捕获角度组件的右键单击.我还需要阻止右键单击显示浏览器上下文菜单,以便显示我自己的自定义上下文菜单.
我知道在角度1中,您必须创建一个自定义指令来捕获右键单击事件.这仍然是Angular 2的情况,还是内置/有更简单的方法吗？我已经看过一些以前的SO问题,但它们与Angular2无关.
如何完成捕获右键单击并阻止浏览器上下文菜单出现在Angular2中？
我有以下简单的组件：
const Dashboard = () => {
const [{ data, loading, hasError, errors }] = useApiCall(true)
if (hasError) {
return null
}
return (
<Fragment>
<ActivityFeedTitle>
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
}
export default Dashboard
我想阻止ActivityFeedTitle组件的所有重新渲染，以便它在加载时仅渲染一次。我的理解是，我应该能够使用React.useMemo带有空依赖项数组的钩子来实现此目的。我改为return：
return (
<Fragment>
{React.useMemo(() => <ActivityFeedTitle>, [])}
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
就我而言，这应该阻止该组件的所有重新渲染？但是，该ActivityFeedTitle组件仍然会在组件的每次渲染上重新渲染Dashboard。
我缺少什么？
编辑：
使用React.memostill 会导致同样的问题。我尝试ActivityFeedTitle按如下方式记忆我的组件：
const Memo = React.memo(() => (
<ActivityFeedTitle />
))
然后在我的回报中这样使用它：
return …我目前正在使用Pandas和matplotlib来执行一些数据可视化,我想在散点图中添加一条最适合的线.
这是我的代码:
import matplotlib
import matplotlib.pyplot as plt
import pandas as panda
import numpy as np
def PCA_scatter(filename):
matplotlib.style.use('ggplot')
data = panda.read_csv(filename)
data_reduced = data[['2005', '2015']]
data_reduced.plot(kind='scatter', x='2005', y='2015')
plt.show()
PCA_scatter('file.csv')
我该怎么做？
我目前正在准备一个用于生产的React Web应用程序，已经设置了一个centos机器来使用node.js和express托管该应用程序。我想自动启动快递服务器。
我的文件结构如下：
/opt/
|__ /express/
|__ /node_modules/~
|__ express.js
|__ /public/
|__ bundle.js
|__ styles.css
|__ index.html
一旦在本地开发了React Web应用程序，它将打包到一个发行版中，然后public如上所示移动到该文件夹中。express.js然后启动服务器并提供页面：
var path = require('path');
var express = require('express');
var app = express();
var port = 8000;
app.use(express.static('./public'));
app.get('*', (req, res) => {
res.sendfile(path.resolve(__dirname, 'public/index.html'));
});
app.listen(port, () => {
console.log('server running on port ' + port);
});
这工作正常，但需要我每次手动启动服务器。我现在想express.js作为操作系统级别的服务运行，以便其持久性并在启动/重新启动时自动启动。
理想情况下，我希望仅由操作系统而不是其他任何npm软件包来管理。
如何才能做到这一点？
我有一个ul元素作为我网页顶部导航栏的一部分,我想稍微向下移动它.这是当前导航栏的图像:
我想稍微向下移动它,这样文本就可以与页面顶部的白条相匹配.
这是HTML的片段:
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#who">WHO WE ARE</a></li>
<li><a href="#what">WHAT WE DO</a></li>
<li><a href="#contact">GET IN TOUCH</a></li>
</ul>
</nav>
我怎么能用CSS做到这一点？
编辑:
这是所有的HTML代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container …我目前正在将javascript / react项目转换为typescript / react / redux项目。
我目前对此文件有疑问：
import React from 'react';
import GoldenLayout from 'golden-layout';
import {Provider} from 'react-redux';
import Default from '../modules/m-Default/Default';
interface GoldenLayoutWrapperProps {}
interface GoldenLayoutWrapperState {}
class GoldenLayoutWrapper extends React.Component <GoldenLayoutWrapperProps, GoldenLayoutWrapperState> {
public layout;
static contextTypes = {
store: React.PropTypes.object.isRequired
};
private wrapComponent(Component, store) {
class Wrapped extends React.Component {
render () {
return (
<Provider store={store}>
<Component {...this.props}/>
</Provider>
)
}
}
return Wrapped;
}
componentDidMount() {
var layout = new GoldenLayout(this.layoutConfig, this.layout);
layout.registerComponent('Default', …我正在寻找一种方法来检查特定字符串是否存在于大量字符串中.该阵列是多维的:all_strings[strings][chars];.基本上,这个数组是一个字符数组的数组.每个字符数组以'\ 0'结尾
给定另一个字符数组,我需要检查这些字符是否已经存在all_strings,类似于python in关键字.
我根本不确定如何解决这个问题,我知道strcmp可能有所帮助,但我不确定如何实现它.
我目前正在开发一个程序，使用快速选择算法查找数组的第 k 个最小数字。我已经完成了它并且它可以工作，但每次都没有给出正确的结果。
这是我的代码（我没有包括我的partition或swap算法，我很确定它们是正确的）：
/*
inputs...
*A: pointer to array
n: size of array
k: the item in question
*/
int ksmallest(int *A, int n, int k){
int left = 0;
int right = n - 1;
int next = 1;
return quickselect(A, left, right, k);
}
int quickselect(int *A, int left, int right, int k){
//p is position of pivot in the partitioned array
int p = partition(A, left, right);
//k equals pivot got lucky …我正在实现一个双向链表作为编程练习的一部分，并且我希望允许开发人员使用符号向前和向后迭代其节点for...in。
最基本的数据结构如下所示：
class DoublyLinkedList {
constructor(data) {
if (data) {
this.head = new DoublyLinkedListNode(data)
} else {
this.head = null
}
}
append = (data) => {
if (!this.head) {
this.prepend(data)
} else {
const newTail = new DoublyLinkedListNode(data)
let current = this.head
while(current.next) {
current = current.next
}
current.next = newTail
newTail.prev = current
}
}
}
接下来我添加了生成器函数：
*values() {
let current = this.head
while (current) {
yield current.data;
current = current.next;
}
}
*valuesBackward() {
let …我正在寻找一种使用带角度的输入字段过滤无序列表的方法。
我有一个组件*ngFor，它使用指令在页面加载时使用从 JSON 文件中获取的数据构建一个无序列表，它通过使用服务来获取实际数据来实现。这是相关组件的代码：
operation-catalogue.component.ts：
import { Component, OnInit, Input } from '@angular/core';
import { OperationService } from "./operation.service";
@Component({
selector: 'operation-catalogue-component',
templateUrl: './operation-catalogue.component.html',
styleUrls: ['./operation-catalogue.component.css'],
})
export class OperationCatalogueComponent implements OnInit {
operationCatalogue = [];
constructor(private operationService: OperationService) { }
ngOnInit() {
//Get the items to put in the list...
this.operationCatalogue = this.operationService.getOperations();
}
}
operation-catalogue.component.html：
<div id="search-box-div">
<div id="search-field" class="top-div">
<input #input type="text" placeholder="Filter">
</div>
</div>
<ul>
<!-- generate list, name only -->
<li …javascript ×3
angular ×2
c ×2
reactjs ×2
typescript ×2
algorithm ×1
arrays ×1
centos ×1
contextmenu ×1
css ×1
ecmascript-6 ×1
express ×1
html ×1
html-lists ×1
iterator ×1
matplotlib ×1
node.js ×1
numpy ×1
pandas ×1
plot ×1
python ×1
react-hooks ×1
recursion ×1
redux ×1
service ×1
string ×1