我一直在努力找出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) 我最近换了一台新电脑,但是设置得比较漂亮.(我认为它更漂亮,可能是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) 我正在开发一个简单的Angular 2应用程序,我目前拥有的路由是/ login,/ register,/ home和/ profile.
在主应用程序组件上,我有一个<header>
部分,一个<content>
部分和一个<footer>
部分.我目前<router-outlet></router-outlet>
在该content
部分中有,但是当部分中有不同的内容时,也希望(有时)更改header
和footer
组件中的一些内容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指令做些什么?
任何帮助或正确方向的一点将不胜感激!谢谢
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 …
我正在我的 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) 我正在尝试使用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:如果有人知道我所说的“深度”的正确名称,我很想知道!