小编pin*_*ngo的帖子

Angular 2中背景图像URL的属性属性绑定

我一直在努力找出background-image在许多Angular 2组件中动态更改属性的最佳方法.

在下面的示例中,我尝试使用指令background-image将div设置为@Input[ngStyle]:

import {Component, Input} from '@angular/core';
import { User } from '../models';

// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;

@Component({
  selector: 'profile-sidenav',
  styles: [ `
    .profile-image {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  `],
  template: `  
    <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
    <h3>{{ username }}</h3>
  `
})

export class ProfileSidenav {
  @Input() user: UserInput;
  blankImage: string …
Run Code Online (Sandbox Code Playgroud)

css typescript angular-directive angular

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

更好的vscode设置

我最近换了一台新电脑,但是设置得比较漂亮.(我认为它更漂亮,可能是eslint).

这个gif说明了发生了什么:http: //g.recordit.co/H871hfT9Sv.gif

谁知道这个设置叫什么?我希望所有导入都在一行上,除非长度扩展了printWidth设置.

以下是我在VS Code中的相关用户设置:

{
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all"
}
Run Code Online (Sandbox Code Playgroud)

谢谢 !

编辑:视觉描绘,因此您不需要观看GIF.

预期:

import React from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { isIphoneX } from 'react-native-iphone-x-helper'
Run Code Online (Sandbox Code Playgroud)

行为:(不需要的)

import React from 'react'
import {
  Dimensions,
  StyleSheet,
  View
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {
  isIphoneX
} from 'react-native-iphone-x-helper'
Run Code Online (Sandbox Code Playgroud)

eslint visual-studio-code vscode-settings prettier

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

更改Angular中路径更改的页眉和页脚内容

我正在开发一个简单的Angular 2应用程序,我目前拥有的路由是/ login,/ register,/ home和/ profile.

在主应用程序组件上,我有一个<header>部分,一个<content>部分和一个<footer>部分.我目前<router-outlet></router-outlet>在该content部分中有,但是当部分中有不同的内容时,也希望(有时)更改headerfooter组件中的一些内容content.

我已经研究了子路由(并计划在内容部分中使用某些路由),但我不确定这是否是最好的方法,甚至可能.我所做的儿童路线研究来自John Papa的Angular 2课程,这是他的榜样:http://a2-first-look.azurewebsites.net/examples/router-child/plnkr.demo.html ? bust= 1463590738850

我还探讨了在Header和Footer组件中订阅路由器的变化,并使用渲染不同的html *ngIf.这种方法似乎创造了一个全新的服务SO 1,但这个似乎更直接的SO 2.我想我可以用原生的Router指令做些什么?

任何帮助或正确方向的一点将不胜感激!谢谢

angular

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

Point xcode to correct node version

I usually do not have any issues with nvm, but a React Native / Xcode project is failing to build because it's trying to use Node v4.4.3.

My nvm ls looks like this:

   v5.11.0
   v5.11.1
   v6.1.0
   v6.9.5
   v6.11.5
-> v8.7.0
   v10.1.0
   system
Run Code Online (Sandbox Code Playgroud)

When I type nvm use system and node -v it prints 4.4.3, so I suppose that's where Xcode is getting 4.4.3 from.

But when I type nvm alias system 8.7.0 (attempting to alias the system to …

bash xcode node.js nvm react-native

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

react-native-fbsdk“使用 facebook 应用程序登录”不触发回调

我正在我的 React-Native 应用程序中使用react-native-fbsdk. 我不明白为什么“使用 facebook 应用程序登录”不起作用。当用户单击此按钮而不是在 Web 视图中输入其凭据时,LoginManager回调似乎永远不会被触发。

以下是发生的情况的视频:https://i.imgur.com/1XeJC1o.mp4

这个问题似乎可能是常见问题解答中的这个问题,但我相信我的AppDelegate.m文件Info.plist设置正确。

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <SentryReactNative/RNSentry.h>
#import <GoogleMaps/GoogleMaps.h>
#import <react-native-branch/RNBranch.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <RNGoogleSignin/RNGoogleSignin.h>
#import <CodePush/CodePush.h>
#import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
#import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNative/AppCenterReactNative.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [RNBranch initSessionWithLaunchOptions:launchOptions isReferrable:YES];

  NSURL *jsCodeLocation;

  [AppCenterReactNativeCrashes registerWithAutomaticProcessing];  // Initialize AppCenter crashes

  [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];  // Initialize AppCenter analytics

  [AppCenterReactNative register];  // Initialize AppCenter 

  [GMSServices provideAPIKey:@"myAPiKey"];

  [[FBSDKApplicationDelegate sharedInstance] application:application …
Run Code Online (Sandbox Code Playgroud)

react-native react-native-fbsdk react-native-ios

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

如何通过3D CSS转换实现“深度”

我正在尝试使用CSS创建一个“透视模型”。关于如何在Photoshop中使用3D图层实现此功能的教程很多,但我想使用CSS来实现。这是我要实现的示例: 在此处输入图片说明

这是代码(使用原始图像https://i.imgur.com/foDEYpB.png):

#perspective {
  width: 400px;
  height: 500px;
  position: absolute;
  background-image: url("https://i.imgur.com/foDEYpB.png");
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -250px;
  transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}
Run Code Online (Sandbox Code Playgroud)
<div id='perspective'></div>
Run Code Online (Sandbox Code Playgroud)

我已经很接近了,但是不确定如何提高图像看起来的“深度”或“高度”。所说的“深度”的放大版本,其中图像在侧面重复出现: 在此处输入图片说明

PS:如果有人知道我所说的“深度”的正确名称,我很想知道!

css css3 css-transforms

5
推荐指数
2
解决办法
270
查看次数