小编use*_*717的帖子

如何在Angular 2项目中加载图像(和其他资源)?

我对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不喜欢.当我删除文件名中的空格时,图像显示正确.

html angular-cli angular

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

jQuery - "fadeIn不是函数"

遇到一个非常奇怪的问题.试图运行,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)

javascript css jquery twitter-bootstrap bootstrap-4

25
推荐指数
2
解决办法
2万
查看次数

Angular-CLI ng new:"错误:EPERM:不允许操作......"

我正在尝试使用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)

angular-cli angular

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

CSS 等同于 Adob​​e XD 的“背景模糊”功能?

开发基于 Adob​​e XD comp 的页面。

由于 Adob​​e XD 不允许您导出 CSS,因此我一直在手动编码每个元素的 CSS 属性。

我试图弄清楚以下屏幕截图的 CSS 等效项是什么。

顶部带有未模糊文本的模糊矩形: 顶部带有未模糊文本的模糊矩形:

模糊矩形 XD 设置:

模糊矩形 XD 设置:

基于“填充”和“81%”,很容易获取十六进制值,将其转换为 RGB,然后写入background-color: rgba(54,93,62,0.81),但我不知道“背景模糊”设置的等效 CSS 是什么。

css adobe adobe-xd

7
推荐指数
3
解决办法
3700
查看次数

Override custom-logo parameters in WordPress child theme

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 …

php wordpress

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

WordPress主题Child CSS不覆盖Parent,即使之后加载了Child CSS

我正在使用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)

但是,在检查我的页面时,我的父样式仍然覆盖了我的子主题样式.见下面的截图:

在此输入图像描述

css wordpress wordpress-theming

2
推荐指数
1
解决办法
859
查看次数

单击时隐藏父元素

学习 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/

html javascript css angularjs

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

Angular 2:如何在Component中使用input [(ngModel)]值?

对不起,如果这是一个基本问题,但我似乎无法弄清楚.

基本上,我想[(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)

javascript angular

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