我对Angular很新,所以我不确定这样做的最佳做法.
我使用angular-cli并ng new some-project生成一个新的应用程序.
在它的"assets"文件夹中创建了一个"images"文件夹,所以现在我的images文件夹是 src/assets/images
在app.component.html(这是我的申请的根),我把
<img class="img-responsive" src="assets/images/myimage.png">
Run Code Online (Sandbox Code Playgroud)
当我ng serve查看我的Web应用程序时,图像不会显示.
在Angular应用程序中加载图像的最佳做法是什么?
编辑:见下面的答案.我的实际图像名称是使用空格,Angular不喜欢.当我删除文件名中的空格时,图像显示正确.
遇到一个非常奇怪的问题.试图运行,fadeIn()但我收到错误".fadeIn不是一个函数".
我的代码:
body {
display:none;
}Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
Test
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn();
})
</script>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
错误信息:
"TypeError: $('body').fadeIn is not a function. …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用Angular-CLI安装新的Angular2应用程序,但仍然遇到以下问题:
ng new payment-calc-app
在"通过npm安装工具包"之后,我得到以下错误代码:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! path C:\Users\jweston\Documents\Apps\payment-calc-app\node_modules\.staging\rxjs-ccea9159
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\jweston\Documents\Apps\payment-calc-app\node_modules\.staging\rxjs-ccea9159' -> 'C:\Users\jweston\Documents\Apps\payment-calc-app\node_modules\rxjs'
npm ERR! at destStatted (C:\Users\jweston\AppData\Roaming\npm\node_modules\npm\lib\install\action\finalize.js:29:7)
npm ERR! at C:\Users\jweston\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
npm ERR! at FSReqWrap.oncomplete (fs.js:123:15)
npm ERR!
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\jweston\Documents\Apps\payment-calc-app\node_modules\.staging\rxjs-ccea9159' -> …Run Code Online (Sandbox Code Playgroud) 开发基于 Adobe XD comp 的页面。
由于 Adobe XD 不允许您导出 CSS,因此我一直在手动编码每个元素的 CSS 属性。
我试图弄清楚以下屏幕截图的 CSS 等效项是什么。
模糊矩形 XD 设置:
基于“填充”和“81%”,很容易获取十六进制值,将其转换为 RGB,然后写入background-color: rgba(54,93,62,0.81),但我不知道“背景模糊”设置的等效 CSS 是什么。
I'm making a child theme based off of Shapely. In Shapely's functions.php, custom-logo support is declared.
/**
* Add support for the custom logo functionality
*/
add_theme_support( 'custom-logo', array(
'height' => 55,
'width' => 136,
'flex-width' => true,
) );
Run Code Online (Sandbox Code Playgroud)
In my child theme's functions.php, I tried writing:
function override_shapely_customlogo() {
add_theme_support( 'custom-logo', array(
'width' => 168,
'flex-height' => true,
) );
}
add_action( 'after_setup_theme', 'override_shapely_customlogo' );
Run Code Online (Sandbox Code Playgroud)
But this doesn't appear to do anything.
Is there a …
我正在使用Shapely主题.
我将我的孩子主题的样式表排入队列:
function my_theme_enqueue_styles() {
$parent_style = 'shapely-style'; //
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Run Code Online (Sandbox Code Playgroud)
在我的页面源代码中,我的子主题样式肯定是在父母之后加载的<head>.
<link rel='stylesheet' id='shapely-style-css' href='http://mydomainname.com/wp-content/themes/shapely/style.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://mydomainname.com/wp-content/themes/child-theme-name/style.css?ver=4.7.3' type='text/css' media='all' />
Run Code Online (Sandbox Code Playgroud)
但是,在检查我的页面时,我的父样式仍然覆盖了我的子主题样式.见下面的截图:
学习 Angular JS,尝试一个简单的功能,点击一个元素会隐藏它的父元素。
我的代码:
<div class="form-section" ng-init="visible = true" ng-show="visible">
<a class="next" ng-click="$parent.visible = false">NEXT</a>
</div>
Run Code Online (Sandbox Code Playgroud)
但是,当我单击我的<a>标签时没有任何反应。
我的代码基于这个小提琴:http : //jsfiddle.net/oxda3aes/
对不起,如果这是一个基本问题,但我似乎无法弄清楚.
基本上,我想[(ngModel)]从模板中获取一个输入值,然后将其传递给我的组件.我觉得这是非常基本的Angular 2的东西,但我似乎无法得到它.
我的代码:
input.html:
<app-root>Loading...</app-root>
Run Code Online (Sandbox Code Playgroud)
app/app.component.html
<input type="number" [(ngModel)]="value1">
<input type="number" [(ngModel)]="value2">
<!--I want my function value to update every time [(ngModel)] is updated
{{someFunction}}
Run Code Online (Sandbox Code Playgroud)
app/app.component.ts:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
someFunction(): number {
// I want to pass value1 and value 2 here from my ngModel in my template
return value1 * value2
}
}
Run Code Online (Sandbox Code Playgroud) css ×4
angular ×3
javascript ×3
angular-cli ×2
html ×2
wordpress ×2
adobe ×1
adobe-xd ×1
angularjs ×1
bootstrap-4 ×1
jquery ×1
php ×1